:root{--focus: 9, 179, 108;--main: 42, 42, 42;--side-1: 100, 100, 100;--side-2: 180, 180, 180;--side-3: 200, 200, 200;--bg: 220, 220, 220;--shadow: 30, 30, 30;font-weight:600;font-size:24px}@media (max-width: 720px){:root{font-size:20px}}@media (prefers-color-scheme: dark){body{--focus: 66, 185, 131;--main: 255, 242, 232;--side-1: 165, 160, 155;--side-2: 68, 68, 68;--side-3: 51, 51, 51;--bg: 30, 30, 30;--shadow: 28, 28, 28}}.color1{background:rgb(var(--side-1))}.color1 *{color:rgb(var(--bg))}.color2{background:rgb(var(--side-2))}.color3{background:rgb(var(--side-3))}body{background:rgb(var(--bg));overflow:overlay;margin:0}*{fill:rgb(var(--main));color:rgb(var(--main));box-sizing:border-box;font-family:Microsoft JhengHei}a{font-weight:700;color:rgb(var(--focus));text-decoration:none}button{border:none;font-size:1em;cursor:pointer;padding:.1em .4em;border-radius:.4em;background:rgb(var(--side-3))}button:hover{background:rgb(var(--side-2))}select,input,textarea{border:none;font-size:.8em;font-weight:600;padding:.2em .4em;border-radius:.2em;background:rgb(var(--side-3))}#app{width:100vw;height:100vh;display:flex;overflow:hidden}@media (max-width: 720px){#app{overflow:auto;flex-direction:column}}main{width:70%;display:flex;flex-direction:column}@media (max-width: 720px){main{width:100%}}.split{height:50%;margin:.4em;box-shadow:0 0 .4em rgba(var(--shadow),.6);border-radius:.4em;background:rgb(var(--side-3))}@media (max-width: 720px){.split{height:50vw}}aside{width:30%;height:100vh;overflow:auto}aside h2{margin:1em 0 0}aside p{margin:0}@media (max-width: 720px){aside{height:auto;width:100%;overflow:visible}aside>.no-record{box-shadow:0 0 .4em rgba(var(--shadow),.6);background:rgb(var(--side-2));padding:1em .4em 1.2em;height:auto;background:rgb(var(--side-3));border-radius:.4em;margin:.4em}aside>.no-record h2,aside>.no-record p{margin:.2em 0;text-align:center}}aside>.item{margin:.4em;box-shadow:0 0 .4em rgba(var(--shadow),.6);overflow:hidden;position:relative;aspect-ratio:2/1;border-radius:.4em;background:rgb(var(--side-3));cursor:pointer}aside>.item:hover .copy{opacity:1}aside>.item:hover .copy>path{fill:#fff2e8}aside>.item:hover>img{filter:brightness(30%)}aside>.item .copy{position:absolute;transition:opacity .4s;margin:auto;top:0;right:0;left:0;bottom:0;opacity:0}aside>.item>span{position:absolute;margin:1em .4em;border-radius:.4em;padding:0 .4em;font-size:.6em;background:rgb(var(--bg))}aside>.item>img{left:0;bottom:0;width:100%;height:100%;object-fit:cover;position:absolute;transition:filter .4s}.preview{display:flex;justify-content:center;align-items:center;position:relative}.preview .copy{position:absolute;right:.6em;top:.6em;width:2.4em;height:2.4em;box-shadow:0 0 .4em rgba(var(--shadow),.6);cursor:pointer;border-radius:.4em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:rgba(var(--side-2),.6)}.preview>img{border-radius:1.4em;object-fit:contain;position:absolute;padding:1em;height:100%;width:100%}.preview>span{position:absolute;bottom:.5em;left:.5em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:rgba(var(--side-2),.6);box-shadow:0 0 .4em rgba(var(--shadow),.6);padding:.2em;border-radius:.4em}.preview>input{display:none}.info{position:relative;overflow:overlay;padding:1em}.info span{position:absolute;bottom:.5em;right:.5em}.info h2{margin:0 0 1em}.popper{pointer-events:none;position:fixed;margin:1em auto;top:0;left:0;right:0;padding:.4em 1em;width:fit-content;border-radius:.4em;color:rgb(var(--bg));background:rgb(var(--main));box-shadow:0 0 .8em rgba(var(--shadow),.6)}.copy{height:80%}.github{width:.8em;height:.8em}