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