:root{color-scheme:light;--ink:#4a2417;--gold:#edc277;--paper:#fff1cc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f6dfa9;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,.gallery:focus-visible{outline:3px solid #fff;outline-offset:5px;box-shadow:0 0 0 8px #7b3716}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{position:relative;background:#ed7c15}
.hero-art{display:block;width:100%;height:auto}
.downloads{position:absolute;bottom:1.4%;left:50%;transform:translateX(-50%);width:48%;display:flex;gap:8%;justify-content:center;align-items:center}
.download{display:block;flex:1;min-width:0;transition:transform .18s,filter .18s}
.download img{display:block;width:100%;height:auto;filter:brightness(.78) contrast(1.8) saturate(1.1) drop-shadow(0 3px 3px #74310955)}
.download:hover{transform:translateY(-4px);filter:brightness(1.06)}
.download:active{transform:translateY(0)}
.showcase{background:#f5dda8;padding-top:clamp(24px,4vw,72px)}
.section-heading{display:flex;justify-content:center;align-items:center;gap:28px}
.section-heading h2{margin:0;font-family:"STKaiti","KaiTi",serif;font-size:clamp(26px,3vw,46px);font-weight:700;letter-spacing:.2em;text-indent:.2em;color:#6d361d}
.section-heading>span{height:1px;width:clamp(40px,12vw,180px);background:#bd8b47;position:relative}
.section-heading>span:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;background:#bd8b47;transform:rotate(45deg)}
.section-heading>span:last-child:after{right:auto;left:0}
.scroll-frame{position:relative;width:100%;aspect-ratio:16/9;background:url("assets/gallery-bg.png") center/100% 100% no-repeat}
.gallery{position:absolute;left:21.5%;top:14.8%;width:57%;aspect-ratio:16/9;background:#492b20}
.slides,.slide{width:100%;height:100%}
.slide{object-fit:contain;display:block}
.slide[hidden]{display:none}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:60px;border:1px solid #ffdc93;background:#542b1ee6;color:#ffe5ae;font-family:Georgia,serif;font-size:44px;line-height:1;border-radius:3px;transition:background .2s}
.arrow:hover{background:#9c5224}
.previous{left:-72px}.next{right:-72px}
.gallery-controls{position:absolute;top:72%;left:30%;width:40%;display:flex;align-items:center;justify-content:center;gap:28px}
.pagination{display:flex;align-items:center;gap:6px}
.pagination button{width:32px;height:36px;border:0;background:transparent;position:relative}
.pagination button:after{content:"";position:absolute;left:11px;top:13px;width:10px;height:10px;border:1px solid #6b361a;background:#fbe7bb;transform:rotate(45deg)}
.pagination button[aria-current="true"]:after{background:#884222;box-shadow:0 0 0 3px #fff1cd}
.counter{font-family:Georgia,serif;font-size:15px;letter-spacing:.1em;color:#6c341b;white-space:nowrap}
.footer{padding:38px 24px 34px;background:#281e19;border-top:3px solid #b67f43;text-align:center;color:#d9c4a7;font-size:13px;line-height:2}
.footer-heading{display:flex;align-items:center;justify-content:center;gap:22px;color:#f1d8ad}
.footer-heading>span:first-child{font-family:"STKaiti","KaiTi",serif;font-size:25px;font-weight:bold;letter-spacing:.12em}
.footer-heading a{text-decoration:none}
.footer-heading a:hover{text-decoration:underline}
.footer-divider{width:1px;height:18px;background:#876647}
.health{max-width:1040px;margin:16px auto 20px}
.copyright p{margin:2px 0}
.copyright span{display:inline-block;margin:0 12px}
@media(min-width:1921px){.hero,.showcase{max-width:2560px;margin:auto}}
@media(max-width:700px){
 .hero{padding-bottom:18px}
 .downloads{position:relative;left:auto;bottom:auto;transform:none;width:94%;margin:8px auto 0;gap:3%}
 .download{min-height:44px}
 .section-heading{gap:16px}
 .showcase{padding-top:24px}
 .scroll-frame{aspect-ratio:auto;padding:32px 18px 30px;background-size:auto 100%}
 .gallery{position:relative;left:auto;top:auto;width:100%;border:3px solid #e8bb70;box-shadow:0 8px 20px #60301430}
 .arrow{width:36px;height:48px;font-size:34px}
 .previous{left:5px}.next{right:5px}
 .gallery-controls{position:relative;left:auto;top:auto;width:100%;margin-top:14px;gap:18px}
 .footer{padding:26px 20px;font-size:12px}
 .copyright span{display:block;margin:3px 0}
 .health{max-width:440px;text-align:left;line-height:2.1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.age-tip{position:absolute;right:4%;top:5%;z-index:2}
.age-tip summary{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;width:72px;min-height:84px;border:2px solid #ffe4a6;border-radius:5px;color:#fff3cf;background:#6a351edf;box-shadow:0 3px 10px #51200b33;list-style:none}
.age-tip summary::-webkit-details-marker{display:none}
.age-tip summary strong{font-family:Georgia,serif;font-size:32px;line-height:1.2}
.age-tip summary span{font-size:12px;letter-spacing:2px}
.age-tip summary:focus-visible{outline:3px solid #fff;outline-offset:4px}
.age-content{position:absolute;right:0;top:calc(100% + 12px);width:min(340px,88vw);padding:22px 24px;color:#492713;background:#fff4db;border:2px solid #cb9c4b;box-shadow:0 10px 40px #49271340;font-size:14px;line-height:1.8}
.age-content h2{font-size:20px;margin:0 0 12px}.age-content p{margin:10px 0}
@media(max-width:700px){.age-tip{top:10px;right:10px}.age-tip summary{width:48px;min-height:58px}.age-tip summary strong{font-size:23px}.age-tip summary span{font-size:10px;letter-spacing:0}}