@font-face{font-family:LineSeed;src:url('assets/font/LINESeedSansTH_Rg.ttf') format('truetype');font-weight:400}
@font-face{font-family:LineSeed;src:url('assets/font/LINESeedSansTH_Bd.ttf') format('truetype');font-weight:700}
*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:transparent;font-family:LineSeed,sans-serif;user-select:none}
body{pointer-events:none}#progress{position:fixed;left:50%;bottom:13.5vh;width:min(23.1vh,420px);transform:translate(-50%,18px);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .22s ease;filter:drop-shadow(0 7px 16px rgba(0,0,0,.65))}
#progress.visible{visibility:visible;opacity:1;transform:translate(-50%,0)}
.header{display:flex;justify-content:space-between;align-items:end;gap:18px;padding:0 2px 5px;color:#fff;font-size:1.25vh;text-shadow:0 1px 3px #000}
#description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}#percent{font-weight:700;font-variant-numeric:tabular-nums}
.frame{--corner:1vh;position:relative;width:100%;height:2vh;padding:.4vh;background:linear-gradient(rgba(0,0,0,.67),rgba(8,8,13,.78));clip-path:polygon(0 var(--corner),var(--corner) var(--corner),var(--corner) 0,calc(100% - var(--corner)) 0,calc(100% - var(--corner)) var(--corner),100% var(--corner),100% calc(100% - var(--corner)),calc(100% - var(--corner)) calc(100% - var(--corner)),calc(100% - var(--corner)) 100%,var(--corner) 100%,var(--corner) calc(100% - var(--corner)),0 calc(100% - var(--corner)))}
.frame:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff,#c9bbff,#fff);opacity:.92;z-index:-1}
#fill{height:100%;width:0%;background:repeating-linear-gradient(90deg,#9a6cf2 0,#9a6cf2 8px,#7547ca 8px,#7547ca 10px);box-shadow:0 0 12px rgba(154,108,242,.9);transition:width .08s linear}
@media(max-height:600px){#progress{bottom:12vh}.header{font-size:11px}}