@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@1,6..72,400&family=Onest:wght@400;500;600;700&display=swap');

:root{--paper:#f7f1e6;--ink:#343432;--soft:#6b675f;--line:#574e3f33;font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background-image:linear-gradient(#f7f1e6c7,#f7f1e6c7),url('assets/paper.png');background-size:auto,540px}
a{color:inherit;text-decoration:none}
select{font:inherit;border:0;background:transparent;color:var(--soft);cursor:pointer;font-size:12px;padding:8px;max-width:152px}
a:focus-visible,select:focus-visible{outline:2px solid #718e56;outline-offset:6px;border-radius:4px}
::selection{background:#d9e3c8}
.shell{max-width:1200px;margin:auto;padding-left:40px;padding-right:40px}
.site-header{height:100px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand strong{font-size:21px;letter-spacing:-.055em;font-weight:600}
.intro{position:relative;display:flex;align-items:center;justify-content:space-between;padding:24px 0 34px}
h1{font:italic 76px/1.1 Newsreader,Georgia,serif;letter-spacing:-.03em;margin:0}
html:lang(zh) h1{font-family:"Noto Serif SC","Songti SC",SimSun,serif;font-size:60px;font-style:normal;line-height:1.35}
.moment-mark{width:132px;height:104px;position:relative;margin-right:28px;transform:rotate(-12deg)}
.moment-mark img{position:absolute;width:100px;height:100px;object-fit:contain;left:0;top:0;opacity:.9}
.mark-line{width:81px;height:81px;border:1px solid #829d5870;border-radius:50%;position:absolute;left:27px;top:21px}
.collection{display:grid;grid-template-columns:1.18fr 1fr;gap:32px;border-top:1px solid var(--line);padding:26px 0 56px}
.art{display:block;position:relative;height:330px;overflow:hidden;border-radius:5px;background:#05080d;color:white}
.stack-art>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:70% 52%;opacity:.85;transform:scale(1.06);transition:transform .6s}
.stack-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06081390,transparent 80%),linear-gradient(0deg,#030712a0,transparent 35%)}
.stack-art:hover>img{transform:scale(1.12)}
.art-title{position:absolute;z-index:2;left:24px;bottom:24px;font-size:48px;font-weight:700;line-height:.98;letter-spacing:-.06em;margin:0}
.art-title em{font-style:normal;font-weight:400;letter-spacing:.01em}
.art-arrow{position:absolute;right:24px;bottom:22px;z-index:2;font-size:25px}
.spin-art{background:radial-gradient(ellipse at 80% 20%,#17405170,transparent 60%),linear-gradient(140deg,#101c28,#04080f);isolation:isolate}
.spin-art:before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 10% 30%,#bddee8,transparent),radial-gradient(1px 1px at 46% 18%,#bddee8,transparent),radial-gradient(1px 1px at 80% 76%,#bddee8,transparent),radial-gradient(1px 1px at 66% 32%,#bddee8,transparent);background-size:190px 220px;opacity:.6}
.ship{position:absolute;width:82%;height:auto;right:-11%;top:28%;transform:rotate(-20deg);filter:drop-shadow(0 15px 35px #1580a425);opacity:.92;z-index:1}
.orbit{border:1px solid #7bcee92b;border-radius:50%;position:absolute;width:440px;height:250px;top:-75px;left:10%;transform:rotate(-34deg)}
.orbit-two{width:590px;height:390px;left:-1%;top:-120px;border-color:#7bcee913}
.flight-line{position:absolute;right:0;top:48%;height:1px;width:80%;background:linear-gradient(90deg,transparent,#8ed5eb77);transform:rotate(-22deg)}
.spin-art .art-title{font-size:44px;color:#dce8ed}
.card-body{padding:20px 1px 0}
.description{font-size:13px;line-height:1.85;color:var(--soft);margin:0}
.card-bottom{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.play-link{background:#363d2e;color:#fffaf0;border-radius:3px;padding:11px 14px;font-size:12px;display:flex;gap:22px;align-items:center;transition:background .2s}
.play-link:hover{background:#596745}
.detail{font-size:11px;color:var(--soft)}
footer.shell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:25px;padding-bottom:30px;font-size:10px;color:#797266}
footer>div{display:flex;gap:22px}
footer a:hover{color:#a85b32}
@media(min-width:1300px){.art{height:350px}}
@media(max-width:850px){.shell{padding-left:26px;padding-right:26px}.collection{gap:22px;grid-template-columns:1fr 1fr}.art{height:310px}.art-title,.spin-art .art-title{font-size:39px}}
@media(max-width:600px){.shell{padding-left:22px;padding-right:22px}.site-header{height:84px;gap:12px}.brand strong{font-size:19px}select{font-size:11px;max-width:140px;padding-right:0}.intro{padding:20px 0 30px}h1{font-size:60px}html:lang(zh) h1{font-size:45px}.moment-mark{width:86px;height:76px;margin-right:0}.moment-mark img{width:74px;height:74px}.mark-line{width:59px;height:59px;left:20px;top:15px}.collection{grid-template-columns:1fr;gap:37px;padding-top:21px;padding-bottom:35px}.art{height:330px}.art-title,.spin-art .art-title{font-size:48px}footer.shell{font-size:9px;gap:17px}footer>div{gap:14px}}
@media(max-width:360px){.shell{padding-left:18px;padding-right:18px}.brand strong{font-size:17px}select{max-width:125px;padding-left:0}.art{height:300px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}