:root {
    --background-color: #c3c3c3;
    --background-color-transparent-half: rgba(195,195,195,0.5);
    --background-color-transparent: rgba(195,195,195,0);
    --color-font: #111
}

html {
    background: var(--background-color);
    text-align: center;
    font: 14px sans-serif
}

html[data-loading="true"] {
    overflow: hidden
}

html[data-output="true"] {
    overflow: hidden
}

body {
    margin: 0
}

button {
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none;
    cursor: pointer
}

hr {
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 10px auto;
    max-width: 100px;
    display: block
}

header {
    padding: 40px 0 30px
}

header p {
    opacity: .5
}

.loading-box {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: #FFF;
    animation: loadingBoxopacityIn 4s ease
}

.loading-box h2 {
    line-height: 100px;
    width: 100%
}

.loading-box svg {
    width: 320px;
    height: 40px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    animation: opacityIn 3s ease 1s
}

@keyframes loadingBoxopacityIn {
    0%,90% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes opacityIn {
    0%,80%,100% {
        opacity: 0
    }

    40%,60% {
        opacity: 1
    }
}

h1 {
    margin: 0 auto;
    width: 300px;
    height: 52px;
    font-size: 39px;
    line-height: 52px;
    word-spacing: -1px;
    white-space: nowrap;
    overflow: hidden;
    color: transparent;
    background: url(one-last-image-sans.svg) no-repeat;
    background-size: contain
}

@media (min-width: 800px) {
    h1 {
        width:400px;
        height: 68px;
        font-size: 52px;
        line-height: 68px
    }
}

h2 {
    margin: 0
}

.app {
    max-width: 800px;
    margin: 0 auto
}

[v-clock] {
    visibility: hidden
}

.main-box .ctrl-box {
    padding: 40px 0
}

.preview-box {
    position: relative;
    cursor: pointer;
    --cover-width: 480px
}

.preview-box img,.preview-box canvas {
    display: block;
    max-width: 100%;
    margin: 0 auto
}

.preview-box img {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease
}

.preview-box[data-diff] img {
    opacity: 1
}

.preview-box[data-runing] img {
    opacity: 1
}

.preview-box[data-cover="true"] {
    width: var(--cover-width);
    height: var(--cover-width);
    margin: 0 auto
}

.preview-box[data-cover="true"] img,.preview-box[data-cover="true"] canvas {
    width: var(--cover-width);
    height: var(--cover-width);
    object-fit: cover
}

@media (max-width: 480px) {
    .preview-box {
        --cover-width:100vw
    }
}

.generator-btn:before {
    content: '生成'
}

.app[data-runing="true"] .generator-btn {
    pointer-events: none
}

.app[data-runing="true"] .generator-btn:before {
    content: '生成中...'
}

.config-box {
    padding: 40px 0
}

.tips-box {
    padding: 14px
}

.tips-box p {
    margin: 0;
    padding: 4px 0
}

.range-box {
    padding: 4px 0;
    width: 320px;
    max-width: 100%;
    margin: 0 auto;
    font-size: 12px
}

.range-box .head {
    overflow: hidden
}

.range-box .head b {
    float: left
}

.range-box .head span {
    float: right
}

input[type="range"] {
    display: block;
    margin: 0 auto;
    width: 100%
}

.ui-shadow {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0,0,0,0.5);
    overflow: auto;
    overflow-y: scroll;
    overscroll-behavior: contain
}

.output-box {
    background: #FFF;
    width: 800px;
    max-width: 100%;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 40px rgba(0,10,40,0.4)
}

.output-box h2 {
    padding-bottom: 10px
}

.output-box img {
    display: block;
    width: 800px;
    max-width: 100%;
    box-shadow: 0 0 20px rgba(40,80,200,0.2);
    margin: 10px 0 40px
}

.output-box .ctrl-box {
    padding: 10px 0
}

footer {
    padding: 40px 0 80px;
    line-height: 3
}

footer a {
    display: inline-block;
    padding: 0 .5em
}

[data-text]:before {
    content: attr(data-text)
}

.ui-tabs-box {
    display: inline-block;
    overflow: hidden;
    text-align: center
}

.ui-tabs-box a {
    color: currentColor;
    float: left;
    cursor: pointer;
    line-height: 1;
    padding: 6px;
    border-radius: 3px;
    transition: color .3s ease,background-color .3s ease
}

.ui-tabs-box a[data-checked="true"] {
    background: currentColor
}

.ui-tabs-box a[data-checked="true"]:before {
    color: #FFF
}

.ui-switch-box {
    cursor: pointer;
    margin: .2em;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    transition: opacity .3s ease
}

.ui-switch-box .switch {
    display: inline-block;
    vertical-align: middle;
    margin-top: -0.3em;
    width: 2.4em;
    height: 1.4em;
    border-radius: 9em;
    background: rgba(0,0,0,0.2);
    background: #999;
    transition: background-color .3s ease
}

.ui-switch-box .switch .slider {
    display: inline-block;
    vertical-align: top;
    width: 1em;
    height: 1em;
    border-radius: 9em;
    background: #FFF;
    margin: .2em;
    position: relative;
    transition: transform .3s ease
}

.ui-switch-box[data-checked] .switch {
    background: #000
}

.ui-switch-box[data-checked] .switch .slider {
    transform: translateX(1em)
}

.ui-switch-box[data-disabled="true"] {
    opacity: .5;
    pointer-events: none
}

.btn {
    display: inline-block;
    border: 0;
    margin: 4px;
    font-size: 15px;
    line-height: 1.4;
    padding: 10px 16px;
    border-radius: 3px;
    background: #666;
    color: #DDD;
    transition: background-color .3s ease,color .3s ease
}

.btn.current {
    background: #000;
    color: #EEE
}

.btn[disabled] {
    background: #999;
    pointer-events: none
}

.lyric-box {
    --lyric-padding: 100px;
    height: 48px;
    overflow: hidden;
    margin: 20px 0 140px;
    padding: var(--lyric-padding) 0;
    position: relative;
    z-index: 0
}

.lyric-box:before,.lyric-box:after {
    content: '';
    display: block;
    height: var(--lyric-padding);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1
}

.lyric-box:before {
    top: 0;
    background-image: linear-gradient(180deg, var(--background-color), var(--background-color-transparent-half), var(--background-color-transparent))
}

.lyric-box:after {
    bottom: 0;
    background-image: linear-gradient(0deg, var(--background-color), var(--background-color-transparent-half), var(--background-color-transparent))
}

.lyric-box .list {
    transition: transform .3s ease
}

.lyric-box .item {
    box-sizing: border-box;
    height: 48px;
    line-height: 20px;
    padding: 14px 0;
    transition: opacity .3s ease;
    opacity: .3
}

.lyric-box .item[data-have-cn="true"] {
    padding: 4px 0
}

.lyric-box .item .cn {
    opacity: .4;
    font-size: 12px
}

.lyric-box .item[data-current="true"] {
    opacity: 1
}