.magic,.magic img {
    width:100%;
}
.complete_modal h3,.complete_modal h4,.featured_modal h3,.name_modal input,.research_modal h3,h2 {
    font-weight:400;
    font-size:16px;
}
@font-face {
    font-family:pixles;
    src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/04B_03__.TTF);
}

/* Общая темная тема:
   Фон контейнеров: #2A2D3A
   Текст: #CFCFCF
   Тени и рамки: #3B3E4F, #45485A, #232530
   Цвета кнопок и элементов использованы из палитры выше:
   Achievements (фиолетовый): осн #7C5BD4, светл #9C7EE8, темн #5A3FB0
   Follow (синий): осн #559DCE, светл #78BEE2, темн #3B7CAD
   Release/Go/Next (зеленый): осн #66C76C, светл #86E18C, темн #4A9B50
   Scrap/Close/Unavailable (красный): осн #C76C66, светл #E18C86, темн #9B504A
   Share (циан): осн #66C2C7, светл #86E0E1, темн #4A9BA0
   Followers (желт-корич): осн #C7B566, светл #E1D486, темн #9B8E4A
   Swatch: HTML #D45B5B, CSS #5B7CD4, JS #D4C55B, Design #B45BD4
   Body bg: #20222B, Floor bg: #2D303B, Overlay: #393A45
*/

/* Основные стили контейнеров */
.auto,.complete_modal,.endGame,.featured_modal,.intro_modal,.make,.mystats,.name_modal,.pen,.pen_css,.pen_design,.pen_html,.pen_js,.pip,.releasedEmpty,.released_pen__bottom,.released_pen__top,.researchProgress,.research_modal,.startMashing,.username {
    background:#2A2D3A;
    box-shadow:0 3px #3B3E4F,0 -3px #2A2D3A,3px 0 #2A2D3A,-3px 0 #2A2D3A,0 -6px #232530,0 6px #232530,6px 0 #232530,-6px 0 #232530,9px 0 rgba(0,0,0,.1),0 9px rgba(0,0,0,.1);
    position:relative;
    padding:12px;
    color:#CFCFCF;
}

/* Общие пиксельные рамки */
.achievementsButton .pixelsBottom::after,.achievementsButton .pixelsBottom::before,.achievementsButton .pixelsTop::after,.achievementsButton .pixelsTop::before,.auto .pixelsBottom::after,.auto .pixelsBottom::before,.auto .pixelsTop::after,.auto .pixelsTop::before,.complete_modal .pixelsBottom::after,.complete_modal .pixelsBottom::before,.complete_modal .pixelsTop::after,.complete_modal .pixelsTop::before,.endGame .pixelsBottom::after,.endGame .pixelsBottom::before,.endGame .pixelsTop::after,.endGame .pixelsTop::before,.featured_modal .pixelsBottom::after,.featured_modal .pixelsBottom::before,.featured_modal .pixelsTop::after,.featured_modal .pixelsTop::before,.followButton .pixelsBottom::after,.followButton .pixelsBottom::before,.followButton .pixelsTop::after,.followButton .pixelsTop::before,.followers .pixelsBottom::after,.followers .pixelsBottom::before,.followers .pixelsTop::after,.followers .pixelsTop::before,.intro_modal .pixelsBottom::after,.intro_modal .pixelsBottom::before,.intro_modal .pixelsTop::after,.intro_modal .pixelsTop::before,.make .pixelsBottom::after,.make .pixelsBottom::before,.make .pixelsTop::after,.make .pixelsTop::before,.mystats .pixelsBottom::after,.mystats .pixelsBottom::before,.mystats .pixelsTop::after,.mystats .pixelsTop::before,.name_modal .pixelsBottom::after,.name_modal .pixelsBottom::before,.name_modal .pixelsTop::after,.name_modal .pixelsTop::before,.pen .pixelsBottom::after,.pen .pixelsBottom::before,.pen .pixelsTop::after,.pen .pixelsTop::before,.pen_css .pixelsBottom::after,.pen_css .pixelsBottom::before,.pen_css .pixelsTop::after,.pen_css .pixelsTop::before,.pen_design .pixelsBottom::after,.pen_design .pixelsBottom::before,.pen_design .pixelsTop::after,.pen_design .pixelsTop::before,.pen_html .pixelsBottom::after,.pen_html .pixelsBottom::before,.pen_html .pixelsTop::after,.pen_html .pixelsTop::before,.pen_js .pixelsBottom::after,.pen_js .pixelsBottom::before,.pen_js .pixelsTop::after,.pen_js .pixelsTop::before,.pip .pixelsBottom::after,.pip .pixelsBottom::before,.pip .pixelsTop::after,.pip .pixelsTop::before,.releasedEmpty .pixelsBottom::after,.releasedEmpty .pixelsBottom::before,.releasedEmpty .pixelsTop::after,.releasedEmpty .pixelsTop::before,.releasedHeader .pixelsBottom::after,.releasedHeader .pixelsBottom::before,.releasedHeader .pixelsTop::after,.releasedHeader .pixelsTop::before,.released_pen__bottom .pixelsBottom::after,.released_pen__bottom .pixelsBottom::before,.released_pen__bottom .pixelsTop::after,.released_pen__bottom .pixelsTop::before,.released_pen__top .pixelsBottom::after,.released_pen__top .pixelsBottom::before,.released_pen__top .pixelsTop::after,.released_pen__top .pixelsTop::before,.researchButton .pixelsBottom::after,.researchButton .pixelsBottom::before,.researchButton .pixelsTop::after,.researchButton .pixelsTop::before,.researchButton_counter .pixelsBottom::after,.researchButton_counter .pixelsBottom::before,.researchButton_counter .pixelsTop::after,.researchButton_counter .pixelsTop::before,.researchProgress .pixelsBottom::after,.researchProgress .pixelsBottom::before,.researchProgress .pixelsTop::after,.researchProgress .pixelsTop::before,.research_modal .item.researched .research_button .pixelsBottom::after,.research_modal .item.researched .research_button .pixelsBottom::before,.research_modal .item.researched .research_button .pixelsTop::after,.research_modal .item.researched .research_button .pixelsTop::before,.research_modal .item.unavailable .research_button .pixelsBottom::after,.research_modal .item.unavailable .research_button .pixelsBottom::before,.research_modal .item.unavailable .research_button .pixelsTop::after,.research_modal .item.unavailable .research_button .pixelsTop::before,.research_modal .pixelsBottom::after,.research_modal .pixelsBottom::before,.research_modal .pixelsTop::after,.research_modal .pixelsTop::before,.startMashing .pixelsBottom::after,.startMashing .pixelsBottom::before,.startMashing .pixelsTop::after,.startMashing .pixelsTop::before,.username .pixelsBottom::after,.username .pixelsBottom::before,.username .pixelsTop::after,.username .pixelsTop::before {
    display:block;
    content:"";
    position:absolute;
    width:3px;
    height:3px;
    top:0;
}

.achievementsButton .pixelsBottom,.auto .pixelsBottom,.complete_modal .pixelsBottom,.complete_modal .release .pixelsBottom,.complete_modal .scrap .pixelsBottom,.endGame .pixelsBottom,.endGame .restart .pixelsBottom,.endGame .share .pixelsBottom,.featured_modal .awesome .pixelsBottom,.featured_modal .pixelsBottom,.followButton .pixelsBottom,.followers .pixelsBottom,.intro_modal .go .pixelsBottom,.intro_modal .pixelsBottom,.make .pixelsBottom,.mystats .pixelsBottom,.name_modal .next .pixelsBottom,.name_modal .pixelsBottom,.pen .pixelsBottom,.pen_css .pixelsBottom,.pen_design .pixelsBottom,.pen_html .pixelsBottom,.pen_js .pixelsBottom,.pip .pixelsBottom,.releasedEmpty .pixelsBottom,.releasedHeader .pixelsBottom,.released_pen__bottom .pixelsBottom,.released_pen__top .pixelsBottom,.researchButton .pixelsBottom,.researchButton_counter .pixelsBottom,.researchProgress .pixelsBottom,.research_modal .close .pixelsBottom,.research_modal .item.researched .research_button .pixelsBottom,.research_modal .item.unavailable .research_button .pixelsBottom,.research_modal .pixelsBottom,.research_modal .research_button .pixelsBottom,.startMashing .pixelsBottom,.username .pixelsBottom {
    width:calc(100% + 12px);
    position:absolute;
    left:-6px;
    bottom:0;
}
.auto .pixelsBottom::after,.complete_modal .pixelsBottom::after,.endGame .pixelsBottom::after,.featured_modal .pixelsBottom::after,.intro_modal .pixelsBottom::after,.make .pixelsBottom::after,.mystats .pixelsBottom::after,.name_modal .pixelsBottom::after,.pen .pixelsBottom::after,.pen_css .pixelsBottom::after,.pen_design .pixelsBottom::after,.pen_html .pixelsBottom::after,.pen_js .pixelsBottom::after,.pip .pixelsBottom::after,.releasedEmpty .pixelsBottom::after,.released_pen__bottom .pixelsBottom::after,.released_pen__top .pixelsBottom::after,.researchProgress .pixelsBottom::after,.research_modal .pixelsBottom::after,.startMashing .pixelsBottom::after,.username .pixelsBottom::after {
    right:3px;
    top:-3px;
    background:#2A2D3A;
    box-shadow:0 3px #45485A,0 6px rgba(0,0,0,.1),3px 3px rgba(0,0,0,.1);
}
.auto .pixelsBottom::before,.complete_modal .pixelsBottom::before,.endGame .pixelsBottom::before,.featured_modal .pixelsBottom::before,.intro_modal .pixelsBottom::before,.make .pixelsBottom::before,.mystats .pixelsBottom::before,.name_modal .pixelsBottom::before,.pen .pixelsBottom::before,.pen_css .pixelsBottom::before,.pen_design .pixelsBottom::before,.pen_html .pixelsBottom::before,.pen_js .pixelsBottom::before,.pip .pixelsBottom::before,.releasedEmpty .pixelsBottom::before,.released_pen__bottom .pixelsBottom::before,.released_pen__top .pixelsBottom::before,.researchProgress .pixelsBottom::before,.research_modal .pixelsBottom::before,.startMashing .pixelsBottom::before,.username .pixelsBottom::before {
    left:3px;
    top:-3px;
    background:#3B3E4F;
    box-shadow:0 3px #45485A,0 6px rgba(0,0,0,.1),-3px 3px rgba(0,0,0,.1);
}

.achievementsButton .pixelsTop,.auto .pixelsTop,.complete_modal .pixelsTop,.complete_modal .release .pixelsTop,.complete_modal .scrap .pixelsTop,.endGame .pixelsTop,.endGame .restart .pixelsTop,.endGame .share .pixelsTop,.featured_modal .awesome .pixelsTop,.featured_modal .pixelsTop,.followButton .pixelsTop,.followers .pixelsTop,.intro_modal .go .pixelsTop,.intro_modal .pixelsTop,.make .pixelsTop,.mystats .pixelsTop,.name_modal .next .pixelsTop,.name_modal .pixelsTop,.pen .pixelsTop,.pen_css .pixelsTop,.pen_design .pixelsTop,.pen_html .pixelsTop,.pen_js .pixelsTop,.pip .pixelsTop,.releasedEmpty .pixelsTop,.releasedHeader .pixelsTop,.released_pen__bottom .pixelsTop,.released_pen__top .pixelsTop,.researchButton .pixelsTop,.researchButton_counter .pixelsTop,.researchProgress .pixelsTop,.research_modal .close .pixelsTop,.research_modal .item.researched .research_button .pixelsTop,.research_modal .item.unavailable .research_button .pixelsTop,.research_modal .pixelsTop,.research_modal .research_button .pixelsTop,.startMashing .pixelsTop,.username .pixelsTop {
    width:calc(100% + 12px);
    position:absolute;
    left:-6px;
    top:-3px;
}
.auto .pixelsTop::after,.complete_modal .pixelsTop::after,.endGame .pixelsTop::after,.featured_modal .pixelsTop::after,.intro_modal .pixelsTop::after,.make .pixelsTop::after,.mystats .pixelsTop::after,.name_modal .pixelsTop::after,.pen .pixelsTop::after,.pen_css .pixelsTop::after,.pen_design .pixelsTop::after,.pen_html .pixelsTop::after,.pen_js .pixelsTop::after,.pip .pixelsTop::after,.releasedEmpty .pixelsTop::after,.released_pen__bottom .pixelsTop::after,.released_pen__top .pixelsTop::after,.researchProgress .pixelsTop::after,.research_modal .pixelsTop::after,.startMashing .pixelsTop::after,.username .pixelsTop::after {
    right:3px;
    background:#45485A;
}
.auto .pixelsTop::before,.complete_modal .pixelsTop::before,.endGame .pixelsTop::before,.featured_modal .pixelsTop::before,.intro_modal .pixelsTop::before,.make .pixelsTop::before,.mystats .pixelsTop::before,.name_modal .pixelsTop::before,.pen .pixelsTop::before,.pen_css .pixelsTop::before,.pen_design .pixelsTop::before,.pen_html .pixelsTop::before,.pen_js .pixelsTop::before,.pip .pixelsTop::before,.releasedEmpty .pixelsTop::before,.released_pen__bottom .pixelsTop::before,.released_pen__top .pixelsTop::before,.researchProgress .pixelsTop::before,.research_modal .pixelsTop::before,.startMashing .pixelsTop::before,.username .pixelsTop::before {
    left:3px;
    background:#45485A;
}

/* Followers */
.followers {
    background:#C7B566;
    box-shadow:0 3px #E1D486,0 -3px #C7B566,3px 0 #C7B566,-3px 0 #C7B566,0 -6px #9B8E4A,0 6px #9B8E4A,6px 0 #9B8E4A,-6px 0 #9B8E4A,9px 0 rgba(0,0,0,.1),0 9px rgba(0,0,0,.1);
    color:#2A2D3A;
}
.followers .pixelsBottom::after {
    right:3px;
    top:-3px;
    background:#E1D486;
    box-shadow:0 3px #9B8E4A,0 6px rgba(0,0,0,.1),3px 3px rgba(0,0,0,.1);
}
.followers .pixelsBottom::before {
    left:3px;
    top:-3px;
    background:#E1D486;
    box-shadow:0 3px #9B8E4A,0 6px rgba(0,0,0,.1),-3px 3px rgba(0,0,0,.1);
}
.followers .pixelsTop::after {
    right:3px;
    background:#9B8E4A;
}
.followers .pixelsTop::before {
    left:3px;
    background:#9B8E4A;
}

/* Зеленая кнопка release/next/go */
.complete_modal .release,.endGame .restart,.featured_modal .awesome,.intro_modal .go,.name_modal .next,.researchButton,.researchButton_counter,.research_modal .research_button {
    background:#66C76C;
    box-shadow:0 3px #86E18C,0 -3px #66C76C,3px 0 #66C76C,-3px 0 #66C76C,0 -6px #4A9B50,0 6px #4A9B50,6px 0 #4A9B50,-6px 0 #4A9B50,9px 0 rgba(0,0,0,.1),0 9px rgba(0,0,0,.1);
    position:relative;
    padding:12px;
    color:#2A2D3A;
}
.complete_modal .release .pixelsBottom::after,.endGame .restart .pixelsBottom::after,.featured_modal .awesome .pixelsBottom::after,.intro_modal .go .pixelsBottom::after,.name_modal .next .pixelsBottom::after,.researchButton .pixelsBottom::after,.researchButton_counter .pixelsBottom::after,.research_modal .research_button .pixelsBottom::after {
    right:3px;
    top:-3px;
    background:#86E18C;
    box-shadow:0 3px #4A9B50,0 6px rgba(0,0,0,.1),3px 3px rgba(0,0,0,.1);
}
.complete_modal .release .pixelsBottom::before,.endGame .restart .pixelsBottom::before,.featured_modal .awesome .pixelsBottom::before,.intro_modal .go .pixelsBottom::before,.name_modal .next .pixelsBottom::before,.researchButton .pixelsBottom::before,.researchButton_counter .pixelsBottom::before,.research_modal .research_button .pixelsBottom::before {
    left:3px;
    top:-3px;
    background:#86E18C;
    box-shadow:0 3px #4A9B50,0 6px rgba(0,0,0,.1),-3px 3px rgba(0,0,0,.1);
}
.complete_modal .release .pixelsTop::after,.endGame .restart .pixelsTop::after,.featured_modal .awesome .pixelsTop::after,.intro_modal .go .pixelsTop::after,.name_modal .next .pixelsTop::after,.researchButton .pixelsTop::after,.researchButton_counter .pixelsTop::after,.research_modal .research_button .pixelsTop::after {
    right:3px;
    background:#4A9B50;
}
.complete_modal .release .pixelsTop::before,.endGame .restart .pixelsTop::before,.featured_modal .awesome .pixelsTop::before,.intro_modal .go .pixelsTop::before,.name_modal .next .pixelsTop::before,.researchButton .pixelsTop::before,.researchButton_counter .pixelsTop::before,.research_modal .research_button .pixelsTop::before {
    left:3px;
    background:#4A9B50;
}

/* Красная кнопка scrap/close/unavailable */
.complete_modal .scrap,.research_modal .close,.research_modal .item.unavailable .research_button {
    background:#C76C66;
    box-shadow:0 3px #E18C86,0 -3px #C76C66,3px 0 #C76C66,-3px 0 #C76C66,0 -6px #9B504A,0 6px #9B504A,6px 0 #9B504A,-6px 0 #9B504A,9px 0 rgba(0,0,0,.1),0 9px rgba(0,0,0,.1);
    position:relative;
    padding:12px;
    color:#2A2D3A;
}
.complete_modal .scrap .pixelsBottom::after,.research_modal .close .pixelsBottom::after,.research_modal .item.unavailable .research_button .pixelsBottom::after {
    right:3px;
    top:-3px;
    background:#E18C86;
    box-shadow:0 3px #9B504A,0 6px rgba(0,0,0,.1),3px 3px rgba(0,0,0,.1);
}
.complete_modal .scrap .pixelsBottom::before,.research_modal .close .pixelsBottom::before,.research_modal .item.unavailable .research_button .pixelsBottom::before {
    left:3px;
    top:-3px;
    background:#E18C86;
    box-shadow:0 3px #9B504A,0 6px rgba(0,0,0,.1),-3px 3px rgba(0,0,0,.1);
}
.complete_modal .scrap .pixelsTop::after,.research_modal .close .pixelsTop::after,.research_modal .item.unavailable .research_button .pixelsTop::after {
    right:3px;
    background:#9B504A;
}
.complete_modal .scrap .pixelsTop::before,.research_modal .close .pixelsTop::before,.research_modal .item.unavailable .research_button .pixelsTop::before {
    left:3px;
    background:#9B504A;
}

/* Исследовано (серый) */
.research_modal .item.researched .research_button {
    background:#45485A;
    box-shadow:0 3px #3B3E4F,0 -3px #45485A,3px 0 #45485A,-3px 0 #45485A,0 -6px #232530,0 6px #232530,6px 0 #232530,-6px 0 #232530,9px 0 rgba(0,0,0,.1),0 9px rgba(0,0,0,.1);
    position:relative;
    padding:12px;
    color:#959595;
}
.research_modal .item.researched .research_button .pixelsBottom::after {
    right:3px;
    top:-3px;
    background:#3B3E4F;
    box-shadow:0 3px #232530,0 6px rgba(0,0,0,.1),3px 3px rgba(0,0,0,.1);
}
.research_modal .item.researched .research_button .pixelsBottom::before {
    left:3px;
    top:-3px;
    background:#3B3E4F;
    box-shadow:0 3px #232530,0 6px rgba(0,0,0,.1),-3px 3px rgba(0,0,0,.1);
}
.research_modal .item.researched .research_button .pixelsTop::after {
    right:3px;
    background:#232530;
}
.research_modal .item.researched .research_button .pixelsTop::before {
    left:3px;
    background:#232530;
}

/* Achievements (фиолетовый) */
.achievementsButton {
    background:#7C5BD4;
    box-shadow:0 3px #9C7EE8,0 -3px #7C5BD4,3px 0 #7C5BD4,-3px 0 #7C5BD4,0 -6px #5A3FB0,0 6px #5A3FB0,6px 0 #5A3FB0,-6px 0 #5A3FB0,9px 0 rgba(0,0,0,.1),0 9px rgba(0,0,0,.1);
    padding:12px;
    color:#2A2D3A;
}
.achievementsButton .pixelsBottom::after {
    right:3px;
    top:-3px;
    background:#9C7EE8;
    box-shadow:0 3px #5A3FB0,0 6px rgba(0,0,0,.1),3px 3px rgba(0,0,0,.1);
}
.achievementsButton .pixelsBottom::before {
    left:3px;
    top:-3px;
    background:#9C7EE8;
    box-shadow:0 3px #5A3FB0,0 6px rgba(0,0,0,.1),-3px 3px rgba(0,0,0,.1);
}
.achievementsButton .pixelsTop::after {
    right:3px;
    background:#5A3FB0;
}
.achievementsButton .pixelsTop::before {
    left:3px;
    background:#5A3FB0;
}

/* Follow (синий) и releasedHeader */
.followButton,.releasedHeader {
    background:#559DCE;
    box-shadow:0 3px #78BEE2,0 -3px #559DCE,3px 0 #559DCE,-3px 0 #559DCE,0 -6px #3B7CAD,0 6px #3B7CAD,6px 0 #3B7CAD,-6px 0 #3B7CAD,9px 0 rgba(0,0,0,.1),0 9px rgba(0,0,0,.1);
    padding:12px;
    color:#2A2D3A;
}
.followButton .pixelsBottom::after,.releasedHeader .pixelsBottom::after {
    right:3px;
    top:-3px;
    background:#78BEE2;
    box-shadow:0 3px #3B7CAD,0 6px rgba(0,0,0,.1),3px 3px rgba(0,0,0,.1);
}
.followButton .pixelsBottom::before,.releasedHeader .pixelsBottom::before {
    left:3px;
    top:-3px;
    background:#78BEE2;
    box-shadow:0 3px #3B7CAD,0 6px rgba(0,0,0,.1),-3px 3px rgba(0,0,0,.1);
}
.followButton .pixelsTop::after,.releasedHeader .pixelsTop::after {
    right:3px;
    background:#3B7CAD;
}
.followButton .pixelsTop::before,.releasedHeader .pixelsTop::before {
    left:3px;
    background:#3B7CAD;
}

/* Share (циан) */
.endGame .share {
    background:#66C2C7;
    box-shadow:0 3px #86E0E1,0 -3px #66C2C7,3px 0 #66C2C7,-3px 0 #66C2C7,0 -6px #4A9BA0,0 6px #4A9BA0,6px 0 #4A9BA0,-6px 0 #4A9BA0,9px 0 rgba(0,0,0,.1),0 9px rgba(0,0,0,.1);
    padding:12px;
    color:#2A2D3A;
}
.endGame .share .pixelsBottom::after {
    right:3px;
    top:-3px;
    background:#86E0E1;
    box-shadow:0 3px #4A9BA0,0 6px rgba(0,0,0,.1),3px 3px rgba(0,0,0,.1);
}
.endGame .share .pixelsBottom::before {
    left:3px;
    top:-3px;
    background:#86E0E1;
    box-shadow:0 3px #4A9BA0,0 6px rgba(0,0,0,.1),-3px 3px rgba(0,0,0,.1);
}
.endGame .share .pixelsTop::after {
    right:3px;
    background:#4A9BA0;
}
.endGame .share .pixelsTop::before {
    left:3px;
    background:#4A9BA0;
}

/* Hover эффекты подсветки */
.achievementsButton,.complete_modal .release,.complete_modal .scrap,.endGame .restart,.endGame .share,.featured_modal .awesome,.followButton,.intro_modal .go,.name_modal .next,.researchButton,.researchButton_counter,.research_modal .close,.research_modal .research_button {
    position:relative;
}
.achievementsButton:active,.complete_modal .release:active,.complete_modal .scrap:active,.endGame .restart:active,.endGame .share:active,.featured_modal .awesome:active,.followButton:active,.intro_modal .go:active,.name_modal .next:active,.researchButton:active,.researchButton_counter:active,.research_modal .close:active,.research_modal .research_button:active {
    transform:translateY(2px);
}
.achievementsButton::after,.complete_modal .release::after,.complete_modal .scrap::after,.endGame .restart::after,.endGame .share::after,.featured_modal .awesome::after,.followButton::after,.intro_modal .go::after,.name_modal .next::after,.researchButton::after,.researchButton_counter::after,.research_modal .close::after,.research_modal .research_button::after {
    content:"";
    display:block;
    width:30px;
    -webkit-filter:blur(24px);
    background:rgba(255,255,255,.3);
    position:absolute;
    height:50px;
    transform:rotate(-30deg) skewy(31deg);
    color:#fff;
    top:-5px;
    right:100%;
    transition:.4s;
}
.achievementsButton:hover::after,.complete_modal .release:hover::after,.complete_modal .scrap:hover::after,.endGame .restart:hover::after,.endGame .share:hover::after,.featured_modal .awesome:hover::after,.followButton:hover::after,.intro_modal .go:hover::after,.name_modal .next:hover::after,.researchButton:hover::after,.researchButton_counter:hover::after,.research_modal .close:hover::after,.research_modal .research_button:hover::after {
    right:0;
}

/* Скрытые элементы */
.auto.off .tick,.auto.on .cross,.complete_modal div.hide,.magic,.research_modal .hide {
    display:none;
}

/* Magic и grain */
.magic {
    position:fixed;
    left:0;
    margin:auto;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    height:100%;
    background:#000;
}
.grain {
    position:fixed;
    top:0;
    left:0;
    z-index:4;
    pointer-events:none;
}

/* Позиционирование auto, startMashing */
.auto,.auto img,.startMashing {
    position:absolute;
}
.auto {
    text-align:left;
    bottom:-12px;
    height:6px;
    z-index:2;
    line-height:7px;
    left:0;
    right:-480px;
    margin:auto;
    cursor:pointer;
    width:80px;
}
.auto img {
    width:15px;
    right:6px;
    top:7px;
}
.startMashing {
    text-align:center;
    bottom:40px;
    height:160px;
    z-index:2;
    line-height:160px;
    left:0;
    right:0;
    margin:auto;
    width:500px;
}
.startMashing h2 {
    position:relative;
    top:-13px;
}
.startMashing h2 img {
    width:20px;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:100px;
    -webkit-animation:.3s linear infinite key;
    animation:.3s linear infinite key;
}
@-webkit-keyframes key {
    from {
        top:100px;
    }
    to {
        top:102px;
    }
}
@keyframes key {
    from {
        top:100px;
    }
    to {
        top:102px;
    }
}

/* researchButton */
.researchButton {
    width:203px;
    color:#2A2D3A;
    float:left;
    clear:left;
    margin-top:27px;
    cursor:pointer;
}
.researchButton_counter {
    right:-20px;
    width:30px;
    color:#2A2D3A;
    float:left;
    text-align:center;
    clear:left;
    margin-top:27px;
    top:-55px;
    height:30px;
    line-height:31px;
    cursor:pointer;
    padding:0;
    position:absolute;
    z-index:1;
}
.achievementsButton,.followButton {
    width:203px;
    float:left;
    margin-top:27px;
    cursor:pointer;
    clear:left;
}
.achievementsButton img,.researchButton img {
    width:12px;
    position:absolute;
    top:18px;
    right:18px;
}

/* username */
.username {
    float:left;
    padding:8px 12px 0 10px;
    position:relative;
    top:30px;
}
.username img {
    width:45px;
    position:absolute;
    left:-24px;
    top:-36px;
}

/* date и т.д. */
.date img,.options_bg img {
    width:21px;
}
.achievementsButton {
    display:none;
}
.followButton {
    color:#2A2D3A;
}
.floor,.overlay {
    left:0;
    width:100%;
}

/* date позиционирование */
.date {
    float:right;
    position:absolute;
    right:40px;
    top:10px;
}
.date img {
    position:relative;
    top:2px;
}

/* floor */
.floor {
    background:#2D303B;
    position:fixed;
    bottom:0;
    height:36%;
    z-index:-1;
    border-top:30px solid #2D303B;
}

/* options */
.options {
    position:absolute;
    right:34px;
    top:81px;
}
.options_sf img {
    width:18px;
    margin-right:10px;
}
.options div {
    float:left;
    transition:1s;
    cursor:pointer;
}

/* overlay */
.overlay {
    position:fixed;
    top:0;
    cursor:pointer;
    height:100%;
    background:#393A45;
    z-index:3;
    opacity:.89;
}

/* endGame, researchProgress */
.endGame,.researchProgress {
    left:0;
    top:50%;
    transform:translateY(-50%);
    display:none;
}
.researchProgress {
    position:absolute;
    right:0;
    margin:auto;
    width:200px;
}

/* pen_bar, researchProgress bar */
.pen_bar,.researchProgress .bar {
    width:100%;
    height:6px;
    border-bottom:3px solid #3B3E4F;
    position:relative;
}
.pen_bar_progress,.researchProgress .bar_inner {
    width:0%;
    height:6px;
    position:absolute;
    left:0;
    background:#C7B566;
    box-shadow:0 3px inset #E1D486;
}
.endGame .restart,.endGame .share {
    width:170px;
    right:0;
    margin:auto;
    bottom:-26px;
    cursor:pointer;
}
.researchProgress .bar_inner.animate {
    -webkit-animation:2s linear bar;
    animation:2s linear bar;
}
@-webkit-keyframes bar {
    from {
        width:0%;
    }
    to {
        width:100%;
    }
}
@keyframes bar {
    from {
        width:0%;
    }
    to {
        width:100%;
    }
}

/* endGame */
.endGame {
    text-align:center;
    width:600px;
    height:250px;
    position:absolute!important;
    z-index:3;
    right:0;
    margin:auto;
    padding:40px;
    text-align:center;
}
.endGame .mostName,.endGame .mostViews {
    font-weight:700;
}
.endGame hr {
    border:none;
    width:95%;
    border-top:3px solid #3B3E4F;
    margin-bottom:30px;
    box-shadow:0 3px rgba(0,0,0,.02);
    z-index:2;
    position:relative;
}
.endGame h3,.intro_modal h3,.name_modal h3 {
    text-align:center;
    font-weight:400;
    font-size:16px;
    margin:15px 24px 23px;
}
.endGame h1 {
    font-size:41px;
    margin-bottom:15px;
    color:#CFCFCF;
    margin-top:19px;
}
.intro_modal hr,.name_modal hr,.research_modal hr {
    margin-bottom:-1px;
    box-shadow:0 3px rgba(0,0,0,.02);
    z-index:2;
}
.endGame .restart {
    color:#2A2D3A;
    position:absolute;
    text-align:center;
    left:220px;
}
.endGame .share {
    color:#2A2D3A;
    position:absolute;
    text-align:center;
    left:-240px;
}

/* headers */
.complete_modal__header,.endGame__header,.featured_modal__header,.intro_modal__header,.name_modal__header,.research_modal__header {
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    width:282px;
    top:-87px;
}

/* featured_modal, intro_modal, name_modal */
.featured_modal,.intro_modal,.name_modal {
    width:600px;
    height:250px;
    z-index:3;
    top:50%;
    transform:translateY(-50%);
    padding:40px;
    position:absolute!important;
    right:0;
}
.endGame__header p {
    position:absolute;
    width:100%;
    text-align:center;
    top:71px;
    color:#CFCFCF;
    left:4px;
}
.endGame__header img {
    width:282px;
}
.name_modal {
    transition:.5s;
    left:0;
    margin:auto;
    text-align:center;
}
.name_modal hr,.research_modal hr {
    border:none;
    width:95%;
    border-top:3px solid #3B3E4F;
    position:relative;
}
.intro_modal .text,.name_modal .text {
    margin:20px 0;
}
.name_modal input {
    font-family:pixles;
    outline:0;
    text-align:center;
    padding:19px;
    width:360px;
    border-radius:5px;
    color:#CFCFCF;
    margin-top:67px;
    border:3px solid #45485A;
    background:#2A2D3A;
}
.featured_modal .awesome,.intro_modal .go,.name_modal .next {
    color:#2A2D3A;
    position:absolute;
    bottom:-26px;
    width:140px;
    text-align:center;
    margin:auto;
    left:0;
    cursor:pointer;
    right:0;
}
.name_modal__header p {
    position:absolute;
    width:100%;
    text-align:center;
    top:71px;
    color:#CFCFCF;
    left:4px;
}
.name_modal__header img {
    width:282px;
}
.intro_modal {
    left:200%;
    transition:.5s;
    margin:auto;
    text-align:center;
}
.intro_modal hr {
    border:none;
    width:95%;
    border-top:3px solid #3B3E4F;
    position:relative;
}
.intro_modal__header p {
    position:absolute;
    width:100%;
    text-align:center;
    top:71px;
    color:#CFCFCF;
    left:4px;
}
.intro_modal__header img {
    width:282px;
}
.featured_modal {
    display:none;
    left:0;
    margin:auto;
    text-align:left;
}
.featured_modal h3 {
    text-align:center;
    margin:24px;
}
.featured_modal hr {
    border:none;
    border-top:3px solid #3B3E4F;
    margin-bottom:40px;
}
.make,.research_modal .item:first-child {
    border:none;
}
.featured_modal__header p {
    position:absolute;
    width:100%;
    text-align:center;
    top:71px;
    color:#CFCFCF;
    left:4px;
}
.featured_modal__header img {
    width:282px;
}
.featured_modal .name {
    color:#CFCFCF;
}
.featured_modal .picker {
    color:#CFCFCF;
}
.featured_modal__text {
    padding-top:15px;
}
.featured_modal__image {
    float:left;
    margin-right:30px;
}

/* complete_modal, research_modal */
.complete_modal,.research_modal {
    display:none;
    transition:.7s;
    width:300px;
    margin:auto;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    left:0;
    text-align:center;
}
.featured_modal__image img {
    width:198px;
}
.research_modal {
    height:40px;
    position:absolute!important;
    right:0;
}
.research_modal h3 {
    text-align:center;
    margin:40px 24px 24px;
}
.research_modal__header p {
    position:absolute;
    width:100%;
    text-align:center;
    top:67px;
    color:#CFCFCF;
    left:1px;
}
.research_modal__header img {
    width:282px;
}
.research_modal .close {
    color:#2A2D3A;
    cursor:pointer;
    position:absolute;
    right:-22px;
    top:-22px;
    width:10px;
    height:10px;
    z-index:3;
    line-height:11px;
}
.research_modal::after {
    position:fixed;
    bottom:15px;
    left:0;
    width:98%;
    height:40px;
    display:block;
    background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,#2A2D3A 100%);
    content:"";
}
.research_modal__list {
    padding:1px 20px 20px;
    overflow-y:scroll;
    height:288px;
    position:relative;
}
.research_modal .item {
    float:left;
    clear:left;
    border-top:3px solid #3B3E4F;
    padding:24px 0 21px;
    width:95%;
    position:relative;
    left:11px;
}
.complete_modal,.followers,.make {
    position:absolute!important;
}
.research_modal .item.unavailable .research_button {
    color:#2A2D3A;
}
.research_modal .item.researched::after {
    display:block;
    position:absolute;
    right:-16px;
    top:6px;
    content:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rTick.png);
}
.research_modal .item.researched .name,.research_modal .item.researched .stat {
    opacity:.45;
}
.research_modal .item.researched .research_button {
    color:#959595;
}
.research_modal .sep {
    margin:0 6px;
}
.research_modal .name,.research_modal .stat {
    float:left;
    color:#CFCFCF;
}
.research_modal .green {
    color:#66C76C;
}
.research_modal .stat img {
    width:6px;
    margin-left:4px;
}
.research_modal .research_button {
    right:0;
    color:#2A2D3A;
    cursor:pointer;
    padding:4px!important;
    float:right;
    position:absolute!important;
    top:18px;
    width:150px;
}
.research_modal .research_button img {
    width:10px;
    position:relative;
    left:-4px;
}
.followers span,.research_modal .research_button .cost {
    color:#2A2D3A;
}

/* complete_modal */
.complete_modal {
    opacity:0;
    height:40px;
    right:0;
}
.complete_modal .swatch {
    position:relative;
    left:49px;
    top:3px;
}
.complete_modal__header p {
    position:absolute;
    width:100%;
    text-align:center;
    top:68px;
    color:#CFCFCF;
    left:1px;
}
.complete_modal__header img {
    width:282px;
}
.complete_modal .scrap {
    position:absolute;
    text-align:left;
    width:240px;
    bottom:-25px;
    color:#2A2D3A;
    cursor:pointer;
    left:30px;
}
.complete_modal .scrap img {
    width:15px;
    float:right;
    position:relative;
    top:1px;
}
.complete_modal hr {
    border:none;
    border-top:3px solid #3B3E4F;
    margin-bottom:20px;
    margin-top:22px;
    width:60%;
}
.complete_modal h2 {
    margin:20px 0 6px;
}
.complete_modal .release {
    cursor:pointer;
    color:#2A2D3A;
    position:absolute;
    width:240px;
    right:30px;
    bottom:-25px;
}
.complete_modal .release img {
    width:18px;
    float:right;
    position:relative;
    top:6px;
}
.complete_modal h3 {
    margin:30px 0;
}
.make,img.m {
    margin:auto;
    right:0;
}
.complete_modal__stats .css img,.complete_modal__stats .html img,.complete_modal__stats .js img {
    width:48px;
    margin-top:-5px;
}
.complete_modal__stats .design img {
    width:36px;
    margin-top:-5px;
}
.complete_modal__stats div {
    float:left;
    text-align:center;
    width:25%;
    box-shadow:inset -3px 0 #2A2D3A;
}
.complete_modal__stats div:last-child {
    box-shadow:none;
}
.complete_modal__stats div span {
    display:block;
    margin-top:17px;
    position:relative;
    left:4px;
}

/* make */
.make {
    left:0;
    width:200px;
    bottom:40px;
    cursor:pointer;
    outline:0;
}

/* body */
body {
    background:#20222B url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gBg.png");
    color:#CFCFCF;
    margin:50px;
    overflow:hidden;
    font-family:pixles;
    text-transform:uppercase;
    font-size:16px;
    line-height:20px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

/* Изображения */
img {
    image-rendering:auto;
    image-rendering:crisp-edges;
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering:-moz-crisp-edges;
    image-rendering:pixelated;
}
img.m {
    position:absolute;
    top:50%;
    left:-40px;
    transform:translateY(-50%);
    width:756px;
}
.followers {
    float:right;
    transform:translateX(calc(100% + -3px));
    right:0;
    z-index:3;
    bottom:12px;
    padding:13px 50px!important;
}
.followers img,.mystats img,.pen,.pip,.releasedEmpty {
    position:absolute;
}
.followers img {
    width:42px;
    left:-25px;
    top:-18px;
    z-index:2;
}
h2 {
    margin:0 0 6px;
}
.pen {
    height:52px;
}
.pip,.sep {
    height:10px;
}
.mystats {
    margin-top:110px;
    float:left;
    padding:30px;
    clear:left;
}
.mystats img {
    width:45px;
    left:-24px;
    top:-24px;
    z-index:1;
}
.mystats .pixelsBottom,.mystats .pixelsTop {
    width:calc(100% + -4px);
}
.mystats .swatch,.pen .swatch {
    width:12px;
    height:11px;
    top:3px;
    margin-right:-10px;
}
.mystats .swatch {
    position:relative;
    left:-16px;
    padding:0;
    float:left;
}
.mystats div {
    padding-left:16px;
}
.mystats_css,.mystats_design,.mystats_html,.mystats_js {
    clear:left;
}
.mystats h2 {
    border-bottom:3px solid #3B3E4F;
    float:left;
    margin-bottom:16px;
}
.mystats span.val {
    display:inline-block;
    position:relative;
    left:-8px;
    color:#CFCFCF;
}
.mystats span {
    color:#3B3E4F;
}
p {
    margin:0;
}
.pip {
    background:#2A2D3A;
    left:0;
    line-height:0;
    right:0;
    margin:auto;
    text-align:center;
    width:30px;
    padding:11px 7px 2px;
    top:50%;
}
.sep {
    display:inline-block;
    width:2px;
    background:#45485A;
}
.releasedEmpty {
    clear:both;
    float:right;
    margin-top:249px;
    height:60px;
    line-height:61px;
    right:53px;
    width:303px;
}
.pen {
    left:0;
    right:0;
    margin:auto;
    width:728px;
}
.pen .swatch {
    position:relative;
    margin-left:2px;
    float:left;
}
.pen_css,.pen_design,.pen_html,.pen_js {
    float:left;
    position:relative;
    top:18px;
    margin-right:27px;
    padding:3px;
    width:149px;
    left:13px;
    text-align:center;
}
.releasedHeader {
    float:right;
    color:#2A2D3A;
    position:absolute;
    margin-top:195px;
    top:15px;
    right:60px;
}
.releasedHeader img.icon {
    width:21px;
    top:4px;
    position:relative;
}
.releasedHeader img.arrow {
    width:6px;
    top:0;
    position:relative;
}
.released {
    clear:both;
    float:right;
    margin-top:228px;
    height:420px;
    overflow:scroll;
    padding:0 40px 20px 6px;
    position:relative;
    left:20px;
    width:310px;
    overflow-x:hidden;
    border-top:3px solid #3B3E4F;
}
.released::after {
    display:block;
    content:"";
    position:fixed;
    right:0;
    top:641px;
    background:-webkit-linear-gradient(top,rgba(0,0,0,0) 10%,#2D303B 100%);
    width:390px;
    height:80px;
    z-index:2;
}
.released_pen {
    transition:1s;
    float:left;
    clear:left;
    margin-top:17px;
    height:0;
}
.released_pen__top {
    z-index:2;
    height:66px;
    padding:10px;
}
.released_pen__bottom {
    height:20px;
    top:-72px;
    transition:1s;
    padding-top:30px;
    width:calc(100% - 48px);
    left:12px;
}
.released_pen__bottom .sep {
    margin:0 9px;
}
.released_pen__bottom img {
    margin-right:6px;
    position:relative;
}
.released_pen__bottom img.views {
    width:21px;
    top:2px;
}
.released_pen__bottom img.likes {
    width:15px;
    top:3px;
}
.released_pen__bottom img.comments {
    width:18px;
    top:3px;
}
.released_pen .star {
    position:absolute;
    right:10px;
    top:9px;
}
.released_pen .star img {
    width:15px;
}
.released_pen__graph {
    height:34px;
    position:relative;
    width:300px;
    border-left:3px solid #3B3E4F;
    border-bottom:3px solid #3B3E4F;
    margin:8px 0;
}
.released_pen__graph .line {
    width:10px;
    height:40px;
    max-height:34px;
    float:left;
    position:relative;
    bottom:0;
    background:#C7B566;
}

/* Swatch цвета */
.mystats_html .swatch,.pen_html .swatch,.swatch.html {
    background:#D45B5B;
}
.mystats_css .swatch,.pen_css .swatch,.swatch.css {
    background:#5B7CD4;
}
.mystats_js .swatch,.pen_js .swatch,.swatch.js {
    background:#D4C55B;
}
.mystats_design .swatch,.pen_design .swatch,.swatch.design {
    background:#B45BD4;
}

/* Стили скролла */
::-webkit-scrollbar {
    width:3px;
}
::-webkit-scrollbar-track {
    background:transparent;
}
::-webkit-scrollbar-thumb {
    background:#45485A;
}