* {
    box-sizing: inherit
}

:root {
    -moz-tab-size: 4;
    tab-size: 4
}

html {
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    line-height: 1.15
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    margin: 0
}

hr {
    height: 0
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=reset]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring {
    outline: 1px dotted buttontext
}

[type=button]:-moz-focusring {
    outline: 1px dotted buttontext
}

[type=reset]:-moz-focusring {
    outline: 1px dotted buttontext
}

[type=submit]:-moz-focusring {
    outline: 1px dotted buttontext
}

progress {
    vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button {
    height: auto
}

[type=number]::-webkit-outer-spin-button {
    height: auto
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

:root {
    --white: #eee;
    --black: #111;
    --theme-rgb: 245, 142, 168;
    --theme-color: rgb(var(--theme-rgb));
    --theme-contrast-color: var(--black);
    --font-color: var(--black);
    --background-color: #f1f3f4;
    --semi-black-color: #202020cc;
    --semi-white-color: #e0e0e0cc;
    --border-radius: 8px;
    --text-shadow: 0 0 2px var(--black);
    --drop-shadow: drop-shadow(0 0 4px currentColor);
    --transition-duration: .25s;
    --animation-duration: .25s;
    --animation-durationx2: .5s;
    --animation-out-back: cubic-bezier(.18, .89, .32, 1.28)
}

@media (prefers-color-scheme:dark) {
    :root {
        --font-color: var(--white);
        --background-color: var(--black)
    }
}

[data-theme=light] {
    --font-color: var(--black);
    --background-color: #f1f3f4
}

[data-theme=dark] {
    --font-color: var(--white);
    --background-color: var(--black)
}

@media (prefers-reduced-motion:reduce) {
    :root {
        --transition-duration: 10ms;
        --animation-duration: .1s;
        --animation-durationx2: .1s
    }
}

@font-face {
    font-family: Akari Fallback UI;
    src: local(Segoe UI), local(Roboto), local(Oxygen), local(Ubuntu), local(Cantarell), local(Open Sans), local(Helvetica Neue), local(Helvetica)
}

:root {
    color: var(--font-color);
    background-color: var(--background-color);
    font-feature-settings: "kern"1;
    font-kerning: normal;
    caret-color: var(--theme-color);
    overscroll-behavior-y: contain;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Akari Fallback UI, sans-serif, Apple Color Emoji, Segoe UI Emoji
}

:root,
textarea,
input {
    font-variant-numeric: tabular-nums
}

[lang]:lang(zh) {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Akari Fallback UI, PingFang SC, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif, Apple Color Emoji, Segoe UI Emoji
}

[lang]:lang(zh-HK) {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Akari Fallback UI, PingFang HK, Microsoft JhengHei UI, Microsoft JhengHei, Source Han Sans HK, Noto Sans CJK TC, sans-serif, Apple Color Emoji, Segoe UI Emoji
}

[lang]:lang(zh-TW) {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Akari Fallback UI, PingFang TC, Microsoft JhengHei UI, Microsoft JhengHei, Source Han Sans TW, Noto Sans CJK TC, sans-serif, Apple Color Emoji, Segoe UI Emoji
}

[lang]:lang(ja) {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Akari Fallback UI, Hiragino Kaku Gothic Pro, Yu Gothic UI, Yu Gothic, Meiryo UI, Meiryo, Source Han Sans JP, Noto Sans CJK JP, sans-serif, Apple Color Emoji, Segoe UI Emoji
}

select,
input,
textarea {
    color: inherit
}

svg {
    fill: currentColor
}

::selection {
    color: var(--theme-contrast-color);
    background-color: var(--theme-color)
}

@supports (-ms-ime-align:auto) and (not (position:sticky)) {
    ::selection {
        color: unset;
        background-color: unset
    }
}

:focus {
    outline: none
}

a {
    color: currentColor;
    text-decoration: none
}

a,
button,
[type=submit] {
    cursor: default;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    background: 0;
    border: 0;
    padding: 0 8px
}

ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.link {
    cursor: pointer;
    text-decoration: underline
}

.link:hover {
    -webkit-text-decoration-color: var(--theme-color);
    -webkit-text-decoration-color: var(--theme-color);
    text-decoration-color: var(--theme-color)
}

.link:hover:after {
    content: "🔗";
    margin-left: 4px;
    position: absolute
}

a>* {
    pointer-events: none
}

.button {
    color: var(--black);
    border-radius: var(--border-radius);
    opacity: .8;
    background-color: #fff;
    padding: 8px
}

.button:hover {
    opacity: 1
}

.glow {
    transition: text-shadow var(--transition-duration)ease
}

.glow:hover {
    text-shadow: 0 0 4px
}

.glow>svg {
    transition: filter var(--transition-duration)ease
}

.glow:hover>svg {
    filter: var(--drop-shadow)
}

.ripple {
    position: relative;
    overflow: hidden;
    transform: translate(0)
}

.ripple:after {
    opacity: 0;
    content: "";
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, #0000 10%);
    background-position: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    transition: transform .5s, opacity 1s;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(10)
}

.ripple:active:after {
    opacity: .2;
    transition: all;
    transform: scale(0)
}

.select-all {
    -webkit-user-select: all;
    user-select: all
}

.page-loading:before {
    background-color: var(--background-color);
    opacity: .5;
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.akari-odango-loading {
    text-align: center;
    width: 50vmin;
    height: 50vmin;
    margin: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.start-loading {
    animation: 2s linear infinite akari-loading
}

@keyframes akari-loading {
    0% {
        transform: rotate(0)translate(-2vmin)rotate(0)
    }

    to {
        transform: rotate(360deg)translate(-2vmin)rotate(-360deg)
    }
}

.akari-not-found {
    opacity: .2;
    filter: var(--drop-shadow);
    flex: auto;
    align-self: center;
    max-width: 100vw;
    max-height: 80vh;
    margin-top: auto
}

.app-header {
    z-index: 233;
    padding: 0 8px;
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
    color: var(--theme-color);
    background-color: var(--semi-black-color);
    box-shadow: 0 1px 1px var(--theme-color);
    animation: slide-in-down var(--animation-duration)ease-in-out forwards;
    -webkit-user-select: none;
    user-select: none;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    display: flex;
    position: fixed;
    top: 0
}

@media (max-width:768px) {
    .app-header {
        padding: 0 4px
    }
}

.app-title {
    font-size: 1.5rem;
    font-weight: 500
}

.app-title-text {
    margin-left: 1rem;
    display: none
}

.app-title-svg {
    display: inline-flex
}

@media (min-width:768px) {
    .app-title-text {
        display: inline-flex
    }

    .app-title-svg {
        display: none
    }
}

.app-header a {
    color: #fff;
    transition: color var(--transition-duration)ease-in-out;
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    min-width: 60px;
    min-height: 60px;
    padding: 0;
    display: inline-flex
}

.app-tab {
    animation-name: slide-in-down;
    animation-duration: var(--animation-durationx2);
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    position: relative;
    transform: translateY(-100%)
}

.app-tab:first-child {
    animation-delay: .1s
}

.app-tab:nth-child(2) {
    animation-delay: .2s
}

.app-tab:nth-child(3) {
    animation-delay: .3s
}

.app-tab:nth-child(4) {
    animation-delay: .4s
}

.app-nav:hover .app-tab {
    color: #fff
}

.app-nav .app-tab:hover,
.app-nav>a:target {
    color: currentColor
}

.app-tab:before {
    z-index: -1;
    background-color: var(--theme-contrast-color);
    transform-origin: 50% 0;
    transition: transform var(--transition-duration)ease-in-out;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleY(0)
}

.app-tab:target:before,
.app-tab:hover:before {
    transform: scaleY(1)
}

:hover>.app-tab:target:before {
    transform: scaleY(0)
}

.app-tab:hover:target:before {
    transform: scaleY(1)
}

.app-title-svg>svg,
.app-tab>svg {
    width: 30px;
    height: 30px;
    margin: 0
}

.app-footer {
    z-index: 233;
    animation: slide-in-up var(--animation-duration)ease forwards;
    width: 100%;
    position: fixed;
    bottom: 0
}

html {
    box-sizing: content-box;
    padding-bottom: env(safe-area-inset-bottom);
    min-height: 100vh;
    min-height: -webkit-fill-available
}

body {
    box-sizing: border-box
}

html,
body,
.app-container,
.app-main {
    flex-direction: column;
    display: flex
}

body,
.app-container,
.app-main {
    flex: 1 0 auto
}

body,
.app-container {
    contain: size;
    display: contents
}

@media not all and (-webkit-min-device-pixel-ratio:.0000264583),
not all and (-webkit-min-device-pixel-ratio:.0000264583),
not all and (min-resolution:.001dpcm) {
    @supports not (((-webkit-appearance: none)) and (stroke-color:transparent)) {

        body,
        .app-container {
            display: flex
        }
    }
}

.app-main {
    width: 80%;
    margin: auto;
    padding-top: 60px;
    padding-bottom: 32px
}

@media (max-width:1280px) {
    .app-main {
        width: 1024px;
        max-width: 100%
    }
}

@media (max-width:1024px) {
    .app-main {
        padding-right: env(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
        width: 100%
    }
}

.home {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
    margin-left: env(safe-area-inset-left);
    -webkit-user-select: none;
    user-select: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    top: 60px;
    bottom: 32px;
    left: 0;
    right: 0
}

.home-tip {
    color: var(--white);
    background-color: var(--semi-black-color);
    border-radius: var(--border-radius);
    max-width: 45%;
    margin: 16px;
    padding: 16px
}

.home-tip-top-left {
    position: absolute;
    top: 0;
    left: 0
}

.home-tip-top-right {
    position: absolute;
    top: 0;
    right: 0
}

.home-tip-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0
}

.home-tip-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0
}

.home-tip:after {
    content: "";
    border-style: solid;
    border-width: 8px;
    margin-left: -8px;
    position: absolute;
    left: 50%
}

.home-tip-top-left:after,
.home-tip-bottom-left:after {
    left: 32px
}

.home-tip-top-left:after,
.home-tip-top-right:after {
    border-color: transparent transparent var(--semi-black-color)transparent;
    bottom: 100%
}

.home-tip-bottom-left:after,
.home-tip-bottom-right:after {
    border-color: var(--semi-black-color)transparent transparent transparent;
    top: 100%
}

.home-tip-section {
    font-size: 1.2rem;
    line-height: 1.5
}

.home-tip-item {
    cursor: default;
    margin: 8px;
    padding: 0
}

.home-tip-item>svg {
    margin-right: 8px
}

.home-tip-text,
.home-tip-item>svg {
    vertical-align: middle
}

.app-editor {
    border: 1px solid var(--theme-color);
    border-radius: var(--border-radius);
    transition: box-shadow var(--transition-duration)ease-in-out;
    background-color: #0000;
    flex-direction: column;
    flex: 1 0 auto;
    margin: 16px;
    padding: 8px;
    font-size: 1.2rem;
    display: flex;
    position: relative
}

.app-editor:hover,
.app-editor:focus-within {
    box-shadow: 0 0 10px var(--theme-color)
}

@media (max-width:768px) {
    .app-editor {
        border: 0;
        border-radius: 0;
        margin: 0
    }

    .app-editor:hover,
    .app-editor:focus-within {
        box-shadow: none
    }
}

.app-editor-infobox {
    display: none
}

@supports (display:grid) {
    .app-editor-infobox {
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: auto 1fr auto
    }

    [open]>.app-editor-infobox {
        display: grid
    }
}

@supports not (display:grid) {
    .app-editor-infobox {
        flex-wrap: wrap
    }

    [open]>.app-editor-infobox {
        display: flex
    }

    .app-editor-infobox>input {
        flex: calc(100% - 38px)
    }

    .app-editor-infobox>label:nth-child(3n+1) {
        flex: 0 0 30px
    }

    .app-editor-infobox>label:nth-child(3n+3) {
        text-align: right;
        flex: 0 0 8px
    }
}

.app-textarea {
    overscroll-behavior-y: contain;
    border: none;
    flex: 1 0 auto
}

.app-editor input,
.app-editor textarea {
    resize: none;
    background-color: #0000;
    border: none;
    padding: 0
}

.app-editor>details {
    opacity: .6;
    padding-bottom: 4px
}

.app-editor summary {
    -webkit-user-select: none;
    user-select: none
}

.editor-tools {
    padding: 8px;
    display: flex;
    position: absolute;
    top: 0;
    right: 0
}

.editor-tools-item {
    color: var(--font-color);
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    display: inline-flex
}

.editor-tools-item:active {
    color: currentColor
}

.editor-tools-item>svg {
    color: currentColor;
    width: 24px;
    height: 24px
}

.editor-tools-item:hover>svg {
    filter: drop-shadow(0 0 2px var(--theme-color))
}

.lyric-list {
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    line-height: 1.4;
    position: relative
}

.lyric-list.on-screen-button {
    margin-bottom: 40px
}

.space-button {
    margin-bottom: env(safe-area-inset-bottom);
    color: var(--white);
    background-color: var(--semi-black-color);
    border-bottom: 1px dashed var(--theme-color);
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 32px;
    left: 0
}

.space-button:active {
    border-bottom-style: solid
}

.line {
    white-space: pre-wrap;
    border-top: 2px solid #0000;
    border-bottom: 2px solid #0000;
    align-items: baseline;
    padding: 8px 0 8px 8rem;
    font-size: 1.2rem
}

.line:after {
    content: "";
    display: inline-block
}

.line:nth-child(2n) {
    background-color: #0002
}

.line:nth-child(odd) {
    background-color: #fff2
}

.line>.line-time,
.line>.line-text {
    pointer-events: none
}

.select {
    border-color: var(--theme-color)
}

.curser {
    contain: content;
    position: absolute;
    left: 0
}

.curser:after {
    content: "➤"
}

.line.highlight {
    color: var(--theme-contrast-color);
    background-color: var(--theme-color)
}

.error:before {
    content: "⚠️";
    position: absolute;
    left: -2rem
}

@media (max-width:1080px) {
    .error:before {
        left: 6rem
    }

    .select.error:before {
        visibility: hidden
    }
}

@media (max-width:768px) {
    .line {
        border-width: 1px;
        padding-left: 6rem;
        font-size: 1rem
    }

    .error:before {
        left: 4rem
    }
}

.aside-panel {
    margin-bottom: env(safe-area-inset-bottom);
    background-color: var(--semi-black-color);
    animation: slide-in-right var(--animation-duration)ease 1s forwards;
    border-radius: 8px 0 0 8px;
    position: fixed;
    bottom: 64px;
    right: 0;
    transform: translate(100%)
}

.on-screen-button+.aside-panel {
    bottom: 100px
}

.aside-button {
    box-sizing: content-box;
    padding: 0;
    padding-right: env(safe-area-inset-right);
    color: var(--white);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: 0;
    line-height: 1;
    display: flex
}

.aside-button>svg {
    fill: currentColor;
    width: 30px;
    height: 30px;
    margin: auto
}

.aside-button:hover>svg {
    filter: drop-shadow(0 0 4px var(--theme-color))
}

.syncmode-button {
    border-bottom: 1px solid var(--white);
    border-top-left-radius: 8px
}

.syncmode-button.highlight {
    color: var(--theme-contrast-color);
    background-color: var(--theme-color)
}

.syncmode-button.highlight .lock-open,
.syncmode-button.select .lock-close {
    visibility: hidden
}

audio {
    margin-bottom: env(safe-area-inset-bottom);
    background-color: var(--semi-black-color);
    width: 100%;
    height: 32px;
    position: absolute;
    bottom: 0
}

audio::-webkit-media-controls-enclosure {
    border-radius: 0
}

[disabled] {
    opacity: .5;
    pointer-events: none
}

.lrc-audio {
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    color: var(--white);
    background-color: var(--semi-black-color);
    -webkit-user-select: none;
    user-select: none;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    display: flex
}

.lrc-audio>button,
.lrc-audio>span {
    flex: none
}

.slider {
    --slider-height: 32px;
    height: var(--slider-height);
    margin: 0 5px;
    position: relative
}

.slider>progress,
.slider>input {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0
}

@media (max-width:768px) {
    .timeline-slider {
        --slider-height: 4px;
        width: 100%;
        margin: 0;
        position: absolute;
        bottom: 100%
    }
}

.lrc-audio>button {
    color: #eee;
    height: 32px
}

audio+.lrc-audio>.loadaudio-button>svg {
    animation: 1s ease-in-out infinite drop-shadow-flash
}

audio[src]+.lrc-audio>.loadaudio-button>svg {
    animation: none
}

@keyframes drop-shadow-flash {
    0% {
        filter: 0
    }

    50% {
        filter: var(--drop-shadow)
    }
}

.lrc-audio section {
    margin: 0 5px
}

.timeline-slider {
    flex: 4 0 auto
}

.playbackrate-slider {
    flex: auto;
    max-width: 150px
}

input[type=range] {
    --thumb-size: 16px;
    height: var(--slider-height);
    color: var(--theme-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #0000;
    margin: 0;
    padding: 0
}

input[type=range]:focus {
    outline: none
}

input[type=range]::-webkit-slider-runnable-track {
    height: var(--slider-height);
    background-color: #0000;
    border: 0
}

input[type=range]::-moz-range-track {
    height: var(--slider-height);
    background-color: #0000;
    border: 0
}

input[type=range]::-ms-track {
    color: #0000;
    background-color: #0000;
    border-color: #0000;
    top: -6px
}

input[type=range]::-webkit-slider-thumb {
    z-index: 10;
    width: var(--thumb-size);
    height: var(--thumb-size);
    margin-top: calc((var(--slider-height) - var(--thumb-size))/2);
    box-shadow: 0 0 4px 1px var(--black);
    filter: brightness(120%);
    transition: box-shadow var(--transition-duration)ease-in-out;
    -webkit-appearance: none;
    background-color: currentColor;
    border: 0;
    border-radius: 50%
}

input[type=range]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 4px 1px var(--white)
}

input[type=range]::-moz-range-thumb {
    z-index: 10;
    width: var(--thumb-size);
    height: var(--thumb-size);
    margin-top: calc((var(--slider-height) - var(--thumb-size))/2);
    box-shadow: 0 0 4px 1px var(--black);
    filter: brightness(120%);
    transition: box-shadow var(--transition-duration)ease-in-out;
    -moz-appearance: none;
    background-color: currentColor;
    border: 0;
    border-radius: 50%
}

input[type=range]:hover::-moz-range-thumb {
    box-shadow: 0 0 4px var(--white)
}

input[type=range]::-ms-fill-upper {
    background-color: #0000
}

input[type=range]::-ms-fill-lower {
    background-color: #0000
}

input[type=range]::-ms-thumb {
    background-color: currentColor;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin-top: -1px
}

input[type=range]::-ms-tooltip {
    display: none
}

.slider>progress {
    --progress-meter-color: var(--theme-color);
    box-sizing: border-box;
    margin: calc(var(--slider-height)/2 - 2px)0;
    color: var(--progress-meter-color);
    vertical-align: 0;
    background: var(--white);
    box-shadow: 0 0 4px var(--black);
    transition: box-shadow var(--transition-duration)ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 2px;
    height: 4px;
    display: inline-block
}

.slider:hover progress {
    box-shadow: 0 0 4px var(--white)
}

progress::-moz-progress-bar {
    background-color: var(--progress-meter-color);
    background-image: linear-gradient(-45deg, #fff0 0 50%, #fffc 62.5%, #fff0 75%);
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius: 2px
}

progress::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 2px;
    box-shadow: inset 0 2px 5px #0004
}

progress::-webkit-progress-value {
    background-color: var(--progress-meter-color);
    background-image: linear-gradient(-45deg, #fff0 0 50%, #fffc 62.5%, #fff0 75%);
    background-repeat: repeat-x;
    background-size: 40px 40px, 100% 100%, 100% 100%;
    border-radius: 2px
}

.dialog {
    z-index: 1000;
    border-radius: var(--border-radius);
    margin: auto;
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.dialog[open] {
    animation: dialog-slide-in var(--animation-duration)var(--animation-out-back);
    display: block
}

.dialog-close {
    color: var(--theme-color);
    width: 48px;
    height: 48px;
    padding: 0;
    list-style-type: none;
    position: absolute;
    top: -24px;
    left: -24px
}

.dialog-close::-webkit-details-marker {
    display: none
}

.dialog-close::marker {
    display: none
}

.dialog-close:before {
    z-index: -1;
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.dialog-close>svg {
    width: 36px;
    height: 36px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.loadaudio-dialog {
    color: var(--black);
    background-color: var(--semi-white-color);
    border: 1px solid var(--theme-color);
    box-shadow: 0 0 1rem var(--theme-color), 0 0 0 100vmax #0008;
    width: 500px;
    max-width: calc(100% - 36px);
    height: 10rem;
    max-height: 100%
}

.loadaudio-body {
    box-sizing: border-box;
    justify-content: space-around;
    padding: 10px;
    display: flex
}

.tab {
    display: inline-block
}

.loadaudio-tab {
    text-align: center;
    width: 100%
}

.loadaudio-tab>[type=radio] {
    display: none
}

.loadaudio-content {
    visibility: hidden;
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0
}

.loadaudio-tab>label {
    border: 1px solid #0000;
    border-bottom: 1px solid var(--theme-color);
    -webkit-user-select: none;
    user-select: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    width: 100%;
    padding: 8px 0;
    display: inline-block
}

.loadaudio-tab :checked~label {
    border: 1px solid var(--theme-color);
    background-color: #fffd;
    border-bottom-color: #0000
}

.loadaudio-tab :checked~label~.loadaudio-content {
    visibility: visible
}

.audio-input-tip,
.audio-input-form {
    transition: transform var(--transition-duration)ease-in-out;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex
}

.audio-input-tip:hover {
    transform: scale(1.2)
}

.audio-input-form>input[type=url] {
    border: 0;
    border-bottom: 1px solid var(--theme-color);
    background: 0;
    flex: 1 0 auto;
    width: 60%;
    margin: 8px;
    font-size: 1.5rem
}

.audio-input-form>input[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0
}

@keyframes dialog-slide-in {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    50% {
        opacity: 1
    }
}

.toggle-switch {
    --bar-height: 14px;
    --bar-width: 32px;
    --bar-color: #eee;
    --knob-size: 20px;
    --knob-color: #fff;
    --switch-offset: calc(var(--knob-size) - var(--bar-height));
    --switch-width: calc(var(--bar-width) + var(--switch-offset));
    --transition-duration: .2s;
    --switch-transition: all var(--transition-duration)ease-in-out;
    --switch-theme-rgb: 26, 115, 232;
    --switch-theme-color: rgb(var(--switch-theme-rgb));
    --switch-box-shadow: 0 0 var(--switch-offset)#11111180;
    --switch-margin: 8px;
    box-sizing: border-box;
    min-width: var(--bar-width);
    min-height: var(--bar-height);
    margin: var(--switch-margin);
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    display: inline-flex;
    position: relative
}

.toggle-switch.disabled {
    opacity: .5;
    pointer-events: none
}

.toggle-switch>input,
.toggle-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute
}

.toggle-switch>label,
.toggle-switch-label {
    --knob-x: calc((var(--bar-height) - var(--bar-width))/2);
    box-sizing: border-box;
    width: var(--bar-width);
    height: var(--bar-height);
    margin: var(--switch-margin);
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.toggle-switch>:checked+label,
:checked+.toggle-switch-label {
    --knob-x: calc((var(--bar-width) - var(--bar-height))/2)
}

.toggle-switch>label:before,
.toggle-switch-label:before {
    box-sizing: border-box;
    width: var(--bar-width);
    height: var(--bar-height);
    background: var(--bar-color);
    border: 1px solid var(--switch-theme-color);
    border-radius: var(--bar-height);
    opacity: .5;
    transition: var(--switch-transition);
    content: "";
    position: absolute;
    top: 0;
    left: 0
}

.toggle-switch>:checked+label:before,
:checked+.toggle-switch-label:before {
    background: var(--switch-theme-color)
}

.toggle-switch>label:after,
.toggle-switch-label:after {
    box-sizing: border-box;
    width: var(--knob-size);
    height: var(--knob-size);
    background: var(--knob-color);
    box-shadow: var(--switch-box-shadow);
    transform: translateX(var(--knob-x));
    transition: var(--switch-transition);
    content: "";
    border-radius: 50%
}

.toggle-switch>:checked+label:after,
:checked+.toggle-switch-label:after {
    background: var(--switch-theme-color)
}

.toggle-switch>:focus+label:after,
:focus+.toggle-switch-label:after,
.toggle-switch:hover>label:after,
:hover>.toggle-switch-label:after {
    box-shadow: var(--switch-box-shadow), 0 0 0 calc(var(--knob-size)/2)rgba(var(--switch-theme-rgb), .2)
}

.preferences {
    -webkit-user-select: none;
    user-select: none;
    width: 100%
}

.preferences>ul {
    max-width: 1024px;
    margin: auto
}

.preferences li {
    width: 100%;
    padding: 0 8px
}

.preferences li:nth-child(2n) {
    background-color: #0002
}

.list-item {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 768px;
    min-height: 3.5rem;
    margin: auto;
    display: flex
}

.list-item>span,
.list-item>form {
    margin: 8px 0
}

.list-item>.link {
    padding: 0
}

.toggle-switch {
    --switch-theme-rgb: var(--theme-rgb);
    --switch-margin: 0;
    --bar-height: 20px;
    --bar-width: 52px;
    --knob-size: 28px;
    width: var(--switch-width);
    height: var(--knob-size);
    justify-content: center
}

@supports (-ms-ime-align:auto) {
    .toggle-switch {
        --switch-offset: 8px;
        --switch-width: 60px
    }

    .toggle-switch-label:after {
        box-shadow: 0 0 8px #1118
    }

    :hover>.toggle-switch-label:after {
        box-shadow: 0 0 8px #1118, 0 0 0 14px rgb(var(--theme-rgb)/20%)
    }

    .toggle-switch-label {
        --knob-x: -16px
    }

    :checked+.toggle-switch-label {
        --knob-x: 16px
    }
}

.color-picker {
    vertical-align: middle;
    border-radius: var(--border-radius);
    justify-content: center;
    align-items: center;
    min-width: 30px;
    height: 30px;
    margin: 2px;
    line-height: normal;
    display: inline-flex
}

.color-picker.hash {
    color: var(--theme-contrast-color)
}

.color-picker.checked:before {
    color: var(--theme-contrast-color);
    content: "✔️"
}

.user-color-input-text {
    border: 0;
    border-bottom: 1px solid var(--theme-color);
    background: 0;
    flex: 74px;
    grid-column: span 2;
    place-self: stretch stretch;
    min-width: 60px;
    margin: 2px
}

.user-color-label {
    color: var(--theme-contrast-color)
}

.theme-color-span,
.user-color-label,
.user-color-input-text {
    display: none
}

@media (min-width:768px) {

    .user-color-label,
    .user-color-input-text {
        display: inline-flex
    }
}

.format-example-time,
.format-example-text {
    vertical-align: middle
}

.format-example-text {
    color: var(--theme-contrast-color);
    white-space: pre-wrap;
    background-color: var(--theme-color);
    display: inline
}

.option-select>select {
    text-align-last: right;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #0000;
    border: none;
    outline: 0;
    padding-right: 16px
}

.option-select>select>option {
    color: var(--font-color);
    background-color: var(--background-color)
}

::-ms-expand {
    display: none
}

.option-select {
    position: relative
}

.option-select:after {
    color: var(--theme-color);
    content: "▼";
    pointer-events: none;
    position: absolute;
    right: 0
}

input[type=number] {
    text-align: right;
    border: 0;
    border-bottom: 1px solid var(--theme-color);
    background: 0;
    border-radius: 0;
    width: 4rem;
    height: 30px
}

.akari-hide-wall {
    z-index: -1;
    opacity: .8;
    animation: akari-slide-in .5s var(--animation-out-back)3s forwards, akari-float 20s ease-in-out 4s infinite;
    stroke-width: 4px;
    width: 256px;
    height: 256px;
    position: fixed;
    bottom: 32px;
    right: 0;
    transform: translate(100%)
}

@keyframes akari-slide-in {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(34%)
    }
}

@keyframes akari-float {
    0% {
        transform: translate(34%)
    }

    50% {
        transform: translate(34%, 1rem)
    }

    to {
        transform: translate(34%)
    }
}

.current-theme-color {
    vertical-align: middle;
    font-family: Consolas, Monaco, monospace
}

.dropdown {
    position: relative
}

.dropdown>summary {
    list-style-type: none
}

.dropdown>summary::-webkit-details-marker {
    display: none
}

.dropdown>summary::marker {
    display: none
}

.dropdown>summary:after {
    color: var(--theme-color);
    vertical-align: middle;
    content: "▼";
    pointer-events: none
}

.dropdown[open]>summary:before {
    z-index: 80;
    cursor: default;
    content: "";
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.dropdown-body {
    z-index: 100;
    background-color: var(--background-color);
    border: 1px solid var(--theme-color);
    border-radius: var(--border-radius);
    box-shadow: 0 0 1rem var(--theme-color);
    margin: 8px;
    padding: 8px;
    position: absolute;
    top: 100%;
    right: 0
}

.dropdown-body:before {
    border-color: transparent transparent var(--theme-color)transparent;
    content: "";
    border-style: solid;
    border-width: 8px;
    margin-left: -8px;
    position: absolute;
    bottom: 100%;
    right: 74px
}

.color-wall {
    grid-gap: 4px;
    grid-template-columns: repeat(5, 1fr);
    place-items: center;
    width: 200px;
    display: none
}

[open]>.color-wall {
    flex-wrap: wrap;
    display: grid
}

.pseudo-hidden {
    visibility: hidden;
    position: absolute
}

.gist {
    flex-direction: column;
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex
}

.new-token,
.get-gist-id {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    display: flex
}

.new-token-tip,
.create-new-gist {
    text-align: center;
    flex: 1 0 auto;
    width: 100%;
    max-width: 500px;
    margin: 1rem;
    padding: 1rem
}

@media (max-width:500px) {
    .new-token-tip {
        border-radius: 0
    }
}

.new-token-tip-text,
.gist-id-tip-text {
    text-align: center;
    max-width: 500px;
    margin: 1rem;
    font-size: 1.2rem
}

.github-svg {
    width: 100px;
    height: 100px;
    margin: 1rem
}

.new-token-input,
.gist-id-input {
    border: 0;
    border-bottom: 1px solid var(--theme-color);
    background: 0;
    border-radius: 0;
    flex: 1 0 auto;
    margin: 0 .5rem
}

.new-token-form,
.gist-id-form {
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 1rem 0;
    padding: 1rem 0;
    display: flex
}

.file-list {
    grid-gap: 1rem;
    flex: 1 0 auto;
    grid-template-rows: min-content;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    width: 100%;
    display: grid
}

.file-item {
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px var(--font-color);
    transition: box-shadow var(--transition-duration)ease-in-out;
    -webkit-user-select: none;
    user-select: none;
    padding: .5rem
}

.file-item:hover {
    box-shadow: 0 0 1rem var(--theme-color)
}

.file-content {
    white-space: pre;
    height: 15rem;
    line-height: 1.6;
    overflow: hidden
}

.file-bar {
    justify-content: space-between;
    align-items: flex-start;
    display: flex
}

.file-title {
    padding: .5rem
}

.file-action {
    flex: none
}

.file-load {
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    transition: color .25s ease-in-out;
    display: inline-flex
}

.file-load>svg {
    pointer-events: none
}

.file-load:hover {
    color: var(--theme-color)
}

.gist-details {
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    padding: 1rem
}

@media (min-width:1024px) {
    .gist-details {
        padding: 1rem 0
    }
}

.gist-bar {
    justify-content: space-between;
    width: 100%;
    display: flex
}

@media (max-width:768px) {
    .gist-bar {
        flex-direction: column
    }
}

.gist-info,
.ratelimit {
    flex: auto;
    padding: .5rem
}

.ratelimit>p {
    margin: 0;
    line-height: 1.5
}

.gist-loading {
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    display: flex
}

.gist-no-data {
    flex: auto;
    display: flex
}

.toast-queue {
    width: 100%;
    max-width: 320px;
    position: fixed;
    top: 60px;
    right: 0
}

.toast {
    color: var(--black);
    background-color: var(--semi-white-color);
    border: 1px solid var(--theme-color);
    border-radius: var(--border-radius);
    box-shadow: 0 0 1rem var(--theme-color);
    animation: height-change var(--animation-duration)ease forwards, slide-in-right var(--animation-duration)ease-in forwards, slide-out-right var(--animation-duration)ease-out 5s forwards;
    background-color: #fffd;
    max-height: 320px;
    margin: 1rem;
    display: flex
}
.toast-badge {
    flex: none;
    width: 32px;
    height: 32px;
    margin: 8px
}
.toast-info {
    color: #1b95e0
}
.toast-success {
    color: #19cf86
}
.toast-warning {
    color: #fab81e
}

.toast-badge>svg {
    width: 100%;
    height: 100%
}

.toast-text {
    margin: 1rem .5rem
}

@keyframes height-change {
    0% {
        max-height: 0
    }

    to {
        max-height: 320px
    }
}

@keyframes slide-in-right {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes slide-out-right {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(100%)
    }
}

@keyframes slide-in-up {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes slide-in-down {
    0% {
        transform: translateY(-100%)
    }
    to {
        transform: translate(0)
    }
}