.flat-button{cursor:pointer;display:flex;flex-direction:row;align-items:center;gap:1rem;position:relative;transition:background-color .1s}.flat-button>.content{overflow:hidden;white-space:nowrap}.flat-button>span{display:flex;flex-direction:row;align-items:center}.flat-button.primary{background-color:var(--primary-color-light)}.flat-button.primary:hover{background-color:var(--primary-color-normal)}.flat-button.primary:focus{background-color:var(--primary-color-normal)}.flat-button.secondary{background-color:var(--secondary-color-light)}.flat-button.secondary:hover{background-color:var(--secondary-color-normal)}.flat-button.secondary:focus{background-color:var(--secondary-color-normal)}.flat-button.round{border-radius:.5rem}.flat-button.shadow{box-shadow:#0000003d 0 3px 8px}.flat-button.shadow:focus,.flat-button.shadow:hover{box-shadow:#00000059 0 5px 15px;outline:2px solid var(--color)}.option{border-radius:.5rem;padding:4px 6px}.option:hover{background-color:var(--secondary-color-normal)}#contextmenu{display:flex;flex-direction:column;box-shadow:#0000003d 0 3px 8px;border-radius:.5rem;background-color:var(--background-light);z-index:9;position:fixed;padding:.5rem;gap:.5rem;opacity:0;transform:translateY(-1rem);transition:opacity .2s ease-out,transform .1s ease-in}#contextmenu.show{opacity:1;transform:translateY(0)}#loading{display:flex;flex-wrap:wrap;width:5rem;gap:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#loading>div{background-color:var(--primary-color-light);width:1rem;height:1rem;border-radius:50%;animation:anim .5s ease alternate infinite}#loading>div:nth-child(1){animation-delay:.4s}#loading>div:nth-child(2){animation-delay:.9s}#loading>div:nth-child(3){animation-delay:.2s}#loading>div:nth-child(4){animation-delay:.5s}#loading>div:nth-child(5){animation-delay:.7s}#loading>div:nth-child(6){animation-delay:.5s}#loading>div:nth-child(7){animation-delay:.8s}#loading>div:nth-child(8){animation-delay:.7s}#loading>div:nth-child(9){animation-delay:.8s}@keyframes anim{0%{scale:.4}to{scale:1}}#notification-container{display:flex;flex-direction:column;gap:1rem;position:fixed;top:1rem;right:1rem;align-items:end}.notification{display:flex;flex-direction:row;border-radius:.5rem;box-shadow:#0000003d 0 3px 8px;z-index:9;gap:.5rem;height:2rem;padding:1rem;width:fit-content;align-items:center;transition:transform .1s ease-in,opacity .2s ease-out;transform:translateY(-50%);opacity:0;background-color:#fff}.notification.show{transform:none;opacity:1}.notification-title{color:#333;font-size:var(--medium-font-size)}#viewer{display:flex;flex-direction:column;z-index:10;inset:0;position:fixed}#viewer .background{background-color:var(--background-dark);position:absolute;inset:0;opacity:.8;z-index:-1}#viewer-header{background-color:var(--secondary-color-normal);display:flex;flex-direction:row;height:40px;align-items:center;justify-content:space-between}#viewer-content{flex:1;overflow:hidden;position:relative}#viewer-content>:first-child{max-width:100%;max-height:100%}#viewer-image{position:absolute;inset:0}#viewer-image>img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%;height:auto}#viewer-video{width:100%;height:100%}body,div,p{margin:0;padding:0}body{overflow:hidden}#app{background-color:var(--background-light);width:100vw;height:100vh;color:var(--text-color);overflow:hidden;user-select:none;touch-action:none;font-family:Microsoft Yahei,Arial,Helvetica,sans-serif;line-height:var(--small-font-size);font-size:var(--small-font-size)}input{color:var(--text-color)}.icon{width:32px;height:32px}.clickable{cursor:pointer}body.light,body.dark{--background-light: rgb(255, 255, 255);--background-normal: rgb(245, 245, 245);--background-dark: rgb(235, 235, 235);--theme-h: 200;--primary-color-light: hsla(var(--theme-h), 100%, 60%, 100%);--primary-color-normal: hsla(var(--theme-h), 100%, 50%, 100%);--primary-color-dark: hsla(var(--theme-h), 100%, 40%, 100%);--secondary-color-light: hsla(var(--theme-h), 80%, 100%, 100%);--secondary-color-normal: hsla(var(--theme-h), 70%, 85%, 100%);--secondary-color-dark: hsla(var(--theme-h), 60%, 75%, 100%);--text-color: #333}body{--small-font-size: 1.2rem;--medium-font-size: 1.4rem}@media (min-width: 600px) and (max-width: 1200px){body{--small-font-size: calc(1.2rem + .1 * ((100vw - 600px) / 600));--medium-font-size: calc(1.4rem + .1 * ((100vw - 600px) / 600))}}@media (min-width: 1200px){body{--small-font-size: 1.3rem;--medium-font-size: 1.6rem}}