:root{--gap:4rem;--safe-bottom:env(safe-area-inset-bottom)}*,:after,:before{box-sizing:border-box}body,html{overflow-x:hidden}html{font-size:8px}body{padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Microsoft Yahei,sans-serif;font-size:2rem;line-height:1.9;color:#000}body,h1,h2,h3,p{margin:0}img{max-width:100%;max-height:100%}ul{padding:0;margin:0}li{list-style:none}a{position:relative;color:inherit;text-decoration:none}.page{display:flex;flex-direction:column;width:100vw;min-height:100svh}.main{flex:1 1}.header{position:relative;z-index:9999;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-inline:var(--gap)}.header a{width:10rem;line-height:8rem;text-align:center}.header a.active,.header a:hover{opacity:.3}.header .logo{width:4rem;aspect-ratio:1/1;background:url(/images/logo.jpg) 50%/cover no-repeat;border-radius:50%}.header .dot:not(:nth-of-type(3)){width:5rem}.header .dot:nth-of-type(3){width:4rem}@media(max-width:1023px){.header{padding-top:2rem}.header a{width:auto;line-height:6rem}.header .dot{display:none}.header .dot:nth-of-type(2){display:block;width:100%;height:0;border:0}}.bg{position:fixed;inset:0;background:var(--bg) top/cover no-repeat;filter:blur(4rem);opacity:.4;transform:scale(1.1)}.list{--grid-width:12rem;--grid-height:var(--grid-width);--grid-count:5;position:relative;display:flex;flex-wrap:wrap;justify-content:center;width:calc((var(--grid-width) + var(--gap))*var(--grid-count));margin-block:8vh;margin-inline:auto}.list .item{margin:1.8rem calc(var(--gap)/2)}.list .item .cover{position:relative;width:var(--grid-width);height:var(--grid-height);content:"";background:#fafafa var(--bg) center/cover no-repeat;box-shadow:0 .2em 1rem rgba(0,0,0,.3)}.list .item .cover:after{position:absolute;inset:0;content:"";background:rgba(0,0,0,.3) url(/images/play.svg) 50%/4.5rem no-repeat;opacity:0}.list .item .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--grid-width);margin-top:1.5rem;font-size:.85em;line-height:1.1;color:rgba(0,0,0,.6)}.list .item:hover .cover{box-shadow:0 0 0 1px #000,0 2px 1rem rgba(0,0,0,.4)}.list .item:hover .cover:after{opacity:1}.list .item:hover .title{color:#000}.list .item.play .cover{box-shadow:0 0 0 4px #fff,0 0 0 5px #000,0 1rem 2rem rgba(0,0,0,.4)}.list .item.play .cover:after{background-image:url(/images/pause.svg);opacity:1}.list .item.play .title{color:#000}@media(max-width:1023px){.list{--grid-width:calc((100vw - var(--gap) * (var(--grid-count) + 1)) / var(--grid-count))!important;--grid-count:4;margin-top:0!important;margin-bottom:var(--gap)!important}.list .item .title{font-size:.75em}}.stage .btn-close{display:none}@media(max-width:1023px){.stage .btn-close{position:-webkit-sticky;position:sticky;bottom:3rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:6.8rem;height:6.8rem;margin:3rem auto;cursor:pointer;background:hsla(0,0%,100%,.9);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);border-radius:100%;box-shadow:0 .5rem 1rem rgba(0,0,0,.1)}.stage .btn-close:after,.stage .btn-close:before{width:3rem;height:2px;content:"";background:#aaa}.stage .btn-close:before{transform:translate3d(1.5rem,0,0) rotate(45deg)}.stage .btn-close:after{transform:translate3d(-1.5rem,0,0) rotate(-45deg)}}.error .main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:20vh}.error .main h1{margin-bottom:1.5rem;font-size:20rem}.error .main a:after{content:" →"}