* {
    padding: 0;
    margin: 0;
    font-family: inherit;
    text-decoration: none;
    background: transparent;
    border: none;
    outline: none;
    box-sizing: content-box;
}

::-webkit-scrollbar {
    display: none;
    width: 0;
    background: transparent;
    opacity: 0;
}

::selection {
    color: #000;
    background: #FFF;
}

body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-family: Roboto, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    background: #000000;
    overflow: hidden;
    overscroll-behavior: none;
    cursor: default;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
}

#background.active {
    opacity: 1;
}

#colors {
    position: fixed;
    bottom: calc(50% - 220px);
    left: calc(50% - 100px);
    height: 48px;
    width: 180px;
    padding: 12px 10px;
    cursor: pointer;
    display: none;
}

.colors_item {
    position: relative;
    float: left;
    height: 24px;
    width: 8px;
    margin: 12px 6px;
    border-radius: 4px;
    transition: height 100ms, margin 100ms;
}

.colors_item.active {
    height: 48px;
    margin: 0px 6px;
}

#colors_0 {
    background: #4D4D4D;
}

#colors_1 {
    background: #DDDDDD;
}

#colors_2 {
    background: #7F5FC4;
}

#colors_3 {
    background: #0097CF;
}

#colors_4 {
    background: #71D24F;
}

#colors_5 {
    background: #F1C830;
}

#colors_6 {
    background: #FF8C30;
}

#colors_7 {
    background: #FF1D2A;
}

#colors_8 {
    background: #FF38A2;
}

#display {
    position: absolute;
    top: 34px;
    right: 34px;
    left: 34px;
    height: 248px;
    background: #FFF;
    border-radius: 2px;
    overflow: hidden;
}

#indicator {
    position: absolute;
    top: 34px;
    right: 34px;
    left: 34px;
    height: 248px;
    background: rgba(0,0,0,0.9);
    pointer-events: none;
    opacity: 0;
}

#indicator_icon {
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    height: 80px;
    width: 80px;
    fill: rgba(255,255,255,0.4);
}

#statusbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 23px;
    background: linear-gradient(180deg, #FCFCFC, #A9A9A9);
}

#statusbar_music {
    position: absolute;
    top: 0;
    left: 0;
    height: 23px;
    width: 100px;
}

#statusbar_now {
    position: absolute;
    top: 0;
    left: 0;
    height: 23px;
    width: 100px;
    display: none;
}

#statusbar_battery {
    position: relative;
    float: right;
    height: 23px;
    width: 40px;
    margin-right: 4px;
    pointer-events: none;
}

#statusbar_play {
    position: relative;
    float: right;
    height: 23px;
    width: 23px;
    pointer-events: none;
}

#statusbar_pause {
    position: relative;
    float: right;
    height: 23px;
    width: 23px;
    pointer-events: none;
    display: none;
}

#reflection {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    transform: rotate(-20deg);
    transform-origin: 0 0;
    transition: opacity 200ms;
}

#reflection.active {
    opacity: 0;
}

#playing {
    position: absolute;
    top: 22px;
    right: 0;
    bottom: 0;
    left: 0;
    background: #FFF;
    overflow: hidden;
    display: none;
}

#preview,
#playlist {
    position: absolute;
    top: 23px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #FFF;
    pointer-events: none;
}

.playlist_item {
    position: relative;
    float: left;
    height: 45px;
    width: 100%;
    color: #212121;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.playlist_cover {
    position: absolute;
    top: 0;
    left: 0;
    height: 45px;
    width: 45px;
    pointer-events: none;
}

.playlist_title {
    position: absolute;
    top: 5px;
    right: 10px;
    left: 55px;
    height: 20px;
    color: #212121;
    font-size: 16px;
    font-weight: 900;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.playlist_subtitle {
    position: absolute;
    top: 25px;
    right: 10px;
    left: 55px;
    height: 15px;
    color: #606060;
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.playlist_indicator {
    position: absolute;
    top: 10.5px;
    right: 5px;
    height: 24px;
    width: 24px;
    fill: #FFF;
    display: none;
}

.playlist_item.active {
    background: linear-gradient(180deg, #5EA7DF, #306EBB);
}

.playlist_item.active > .playlist_title,
.playlist_item.active > .playlist_subtitle {
    right: 30px;
    color: #FFF;
}

.playlist_item.active > .playlist_indicator {
    display: block;
}

.preview_item {
    position: relative;
    float: left;
    height: 24px;
    width: calc(100% - 10px);
    padding: 0 5px;
    color: #212121;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.preview_item.active{
    background: blue;
    color: #FFF;
    background: linear-gradient(180deg, #5EA7DF, #306EBB);
}

#playing_artwork {
    position: absolute;
    top: 20px;
    left: 15px;
    height: 260px;
    width: 130px;
    transform: perspective(100px) rotateY(4deg);
}

#playing_artwork_one {
    position: absolute;
    top: 0;
    left: 0;
    height: 130px;
    width: 130px;
    pointer-events: none;
}

#playing_artwork_two {
    position: absolute;
    top: 130px;
    left: 0;
    height: 130px;
    width: 130px;
    pointer-events: none;
    transform: scale(1, -1);
    opacity: 0.2;
}

#playing_artwork_overlay {
    position: absolute;
    top: 130px;
    left: 0;
    height: 130px;
    width: 130px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));
}

#playing_track {
    position: absolute;
    right: 15px;
    bottom: 150px;
    left: 160px;
    max-height: 40px;
    color: #212121;
    font-size: 18px;
    font-weight: 900;
    line-height: 20px;
    overflow: hidden;
}

#playing_artists {
    position: absolute;
    top: 80px;
    right: 15px;
    left: 160px;
    color: #606060;
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#playing_album {
    position: absolute;
    top: 95px;
    right: 15px;
    left: 160px;
    color: #606060;
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#playing_rating {
    position: absolute;
    top: 120px;
    left: 160px;
    height: 12px;
    width: 64px;
    fill: #606060;
}

#playing_number {
    position: absolute;
    top: 140px;
    left: 150px;
    color: #000;
    font-size: 12px;
    font-weight: 900;
    line-height: 16px;
}

#playing_left {
    position: absolute;
    bottom: 20px;
    left: 0;
    height: 15px;
    width: 50px;
    color: #212121;
    font-size: 12px;
    font-weight: 900;
    line-height: 15px;
    text-align: center;
}

#playing_right {
    position: absolute;
    bottom: 20px;
    right: 0;
    height: 15px;
    width: 50px;
    color: #212121;
    font-size: 12px;
    font-weight: 900;
    line-height: 15px;
    text-align: center;
}

#playing_progress {
    position: absolute;
    bottom: 20px;
    left: 50px;
    height: 15px;
    width: calc(100% - 100px);
}

#playing_progress_track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #D8D8D8 0%, #FDFDFD 10%, #F5F5F5 37%, #F2F2F2 47%, #E2E2E2 54%, #EDEDED 83%, #EDEDED 100%);
}

#playing_progress_thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(180deg, #7491EF 0%, #778DF6 21%, #6787EE 25%, #708EF4 51%, #417CF3 56%, #56B3F9 92%, #4F93D7 100%);
}

#device {
    position: fixed;
    top: calc(50% - 333px);
    left: calc(50% - 200px);
    height: 666px;
    width: 400px;
    transform: translateY(-120px) scale(0.5);
}

#device.active {
    transform: translateY(-40px) scale(0.5);
    transition: transform 200ms;
}

#device.fullscreen {
    transform: translateY(-0px) scale(1);
    transition: transform 200ms;
}

#device_frame {
    position: absolute;
    top: 28px;
    right: 28px;
    left: 28px;
    height: 260px;
    background: #000;
    border-radius: 8px;
}

#device_gesture,
#device_crevice,
#device_turning,
#device_actions {
    position: absolute;
    top: calc(50% - 2px);
    left: calc(50% - 140px);
    height: 280px;
    width: 280px;
}

#device_crevice {
    fill: #000000;
}

#device_turning {
    fill: #2C2C2C;
}

#device_actions {
    fill: #EEEEEE;
}

#device_crevice.active {
    fill: rgba(0, 0, 0, 0.2);
}

#device_turning.active {
    fill: #EEEEEE;
}

#device_actions.active {
    fill: #757575;
}

#device_gearing {
    position: absolute;
    top: calc(50% + 16px);
    left: calc(50% - 122px);
    height: 244px;
    width: 244px;
    border-radius: 50%;
    box-shadow: inset -40px 0 122px -122px #FFF;
    transform-origin: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 100ms;
}

#device_gearing.active {
    box-shadow: inset -40px 0 122px -122px #000;
}

#device_protect {
    position: absolute;
    top: -40px;
    right: -40px;
    bottom: -40px;
    left: -40px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
}

#texture {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 34px;
    transition: opacity 200ms;
}

#texture.active {
    opacity: 0;
}

#texture_background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #4D4D4D;
    border-radius: inherit;
}

#texture_illuminate {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    border-radius: inherit;
}

#texture_undulation {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: none;
    border-radius: inherit;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 1);
}

#texture_absorption {
    position: absolute;
    top: calc(50% + 95px);
    left: calc(50% - 43px);
    height: 86px;
    width: 86px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    border-radius: 50%;
}

#texture_granulation {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("data:image/png;base64,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");
    background-position: 0 0;
    background-size: 80px 80px;
    background-repeat: repeat;
    border-radius: inherit;
    opacity: 0.05;
}

#protector {
    position: absolute;
    top: calc(50% - 200px);
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

#confetti {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

#overview {
    position: fixed;
    top: 0;
    right: 0;
    bottom: -1px;
    left: 0;
    padding: calc(50vh - 100px) calc(50% - 200px) 0 calc(50% - 200px);
    overflow-y: scroll;
    overflow-x: hidden;
    transition: opacity 1000ms, visibility 0ms 0ms;
}

#overview.active {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1000ms, visibility 0ms 1000ms;
}

#overview_headline {
    position: relative;
    float: left;
    height: auto;
    width: 100%;
    margin: 0 0 40px 0;
    color: #FFF;
    font-size: 40px;
    font-weight: 900;
    line-height: 40px;
    text-align: center;
}

#overview_auth,
#overview_play {
    position: relative;
    float: left;
    height: auto;
    width: calc(100% - 64px);
    padding: 20px;
    margin: 6px 12px;
    background: #141414;
    border-radius: 8px;
    box-shadow: 0 0 0 1px #212121;
    overflow: hidden;
    cursor: pointer;
    transition: background 200ms;
}

#overview_auth.active {
    cursor: default;
    pointer-events: none;
}

#overview_play {
    opacity: 0.5;
    pointer-events: none;
}

#overview_play.active {
    opacity: 1;
    pointer-events: all;
    height: auto;
}

#overview_auth:active,
#overview_play:active {
    background: #2A2A2A;
}

.overview_divider {
    position: relative;
    float: left;
    height: 1px;
    width: 100%;
    margin: 20px 0 20px 0;
    background: #212121;
    display: none;
}

.overview_spacing {
    position: relative;
    float: left;
    height: 20px;
    width: 100%;
    display: none;
}

.overview_number {
    position: relative;
    float: left;
    height: 24px;
    width: 24px;
    color: #000;
    font-size: 14px;
    font-weight: 900;
    line-height: 24px;
    text-align: center;
    background: #EEE;
    border-radius: 6px;
}

.overview_manual {
    position: relative;
    float: left;
    height: auto;
    width: calc(100% - 88px);
    margin: -4px 20px;
}

.overview_title {
    position: relative;
    float: left;
    height: auto;
    width: 100%;
    color: #EEE;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.overview_subtitle {
    position: relative;
    float: left;
    height: auto;
    width: 100%;
    color: #EEE;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.overview_arrow {
    position: relative;
    float: left;
    height: 24px;
    width: 24px;
    fill: #454545;
}

.overview_check {
    position: relative;
    float: left;
    height: 32px;
    width: 32px;
    margin: -4px;
    display: none;
}

.overview_icon {
    position: relative;
    float: left;
    height: 24px;
    width: 24px;
    margin: 0 20px 0 0;
    fill: #FFF;
    display: none;
}

.overview_text {
    position: relative;
    float: left;
    height: auto;
    width: calc(100% - 44px);
    color: #FFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    display: none;
}

#overview_play.active > .overview_divider,
#overview_play.active > .overview_spacing,
#overview_play.active > .overview_icon,
#overview_play.active > .overview_text {
    display: block;
}

#overview_auth.active > .overview_arrow {
    display: none;
}

#overview_auth.active > .overview_check {
    display: block;
}

#overview_disclaimer {
    position: relative;
    float: left;
    height: auto;
    width: calc(100% - 80px);
    margin: 40px;
    color: #757575;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

@media (max-width: 400px) {
    #overview {
        padding-right: 0;
        padding-left: 0;
    }
    #overview_headline {
        font-size: 10vw;
        line-height: 10vw;
    }
    #overview_disclaimer {
        width: calc(100% - 48px);
        margin-right: 24px;
        margin-left: 24px;
    }
}