:root{--paper:#f7f7ef;--ink:#293f35;--muted:#66716a;--line:#dce0d5;--green:#456753;font-family:"PingFang TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:32px}

*{box-sizing:border-box}
.page-menu{display:flex;align-items:center;gap:5px;background:#edf0e6;border:1px solid #dde3d3;border-radius:30px;padding:4px}
.page-menu a{padding:9px 17px;border-radius:24px;white-space:nowrap;font-size:12px;letter-spacing:1px}
.page-menu a[aria-current="page"]{background:#fffef6;color:#34503b;box-shadow:0 1px 4px #293f3510}
@media(max-width:700px){.page-menu a{padding:8px 12px;font-size:11px}.header nav{gap:12px}}
@media(max-width:480px){.header .nav-download{display:none}}
body{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #6c95ab;outline-offset:6px}
button,a{-webkit-tap-highlight-color:transparent}
a{transition:color .2s,background .2s,transform .2s}
a:hover{color:#668572}
.wrap{max-width:1200px;width:calc(100% - 112px);margin-inline:auto}
.skip-link{position:fixed;top:-80px;left:16px;padding:12px;background:var(--ink);color:white;z-index:5}
.skip-link:focus{top:12px}
.header{height:114px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;font-size:25px;font-weight:700;letter-spacing:3px}
.brand-en{font-size:9px;letter-spacing:2px;font-weight:500;border-left:1px solid #b8c2b5;padding-left:15px}
.brand-dots{display:flex;gap:3px;align-items:flex-end;transform:rotate(-6deg)}
.brand-dots i{display:block;width:10px;height:20px;border-radius:50% 50% 40% 40%;background:#9cbdcd}
.brand-dots i:nth-child(2){height:17px;background:#b1cba8}
.brand-dots i:nth-child(3){height:14px;background:#e8cd78}
nav{display:flex;gap:32px;align-items:center;font-size:13px;letter-spacing:1px}
.nav-download{border:1px solid #aebdac;border-radius:30px;padding:12px 21px}
.nav-download span{margin-left:13px}
.hero{display:grid;grid-template-columns:1fr 1.04fr;align-items:center;min-height:665px;padding-block:42px 48px;gap:10px}
.hero-copy{z-index:1}
.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:500;margin:0 0 28px;line-height:1.8}
.hero .eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow>span{width:7px;height:7px;background:#85a184;border-radius:50%}
h1,h2,h3,p{margin-top:0}
h1{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;font-size:clamp(40px,4.5vw,64px);font-weight:600;line-height:1.55;letter-spacing:4px;margin-bottom:22px}
.brush{position:relative;white-space:nowrap}
.brush:after{content:"";position:absolute;z-index:-1;height:16px;left:-3px;right:-5px;bottom:2px;background:#d9e4c9;opacity:.75;border-radius:40% 30% 45% 25%;transform:rotate(-2deg)}
.hero-description{font-size:15px;line-height:2.2;letter-spacing:1px;color:var(--muted);margin-bottom:29px}
.app-button{display:inline-flex;align-items:center;gap:10px;color:#fff;background:var(--ink);padding:12px 20px 13px 14px;border-radius:11px;box-shadow:0 5px 12px #243d2c0b}
.app-button:hover{background:#456753;color:#fff;transform:translateY(-2px)}
.app-button svg{width:34px;height:38px;fill:currentColor}
.app-button small{display:block;font-size:10px;letter-spacing:2px;margin-bottom:2px}
.app-button strong{font-size:21px;font-weight:500;letter-spacing:.2px}
.button-arrow{font-size:22px;margin-left:20px}
.download-note{font-size:11px;letter-spacing:.8px;color:var(--muted);margin:15px 0 0}
.download-note span{padding:0 9px}
.hero-art{margin:0;position:relative;align-self:center}
.hero-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.hero-art figcaption{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;text-align:center;font-size:16px;letter-spacing:3px;transform:rotate(-4deg);margin-top:-9px;color:#64745f}
.hero-art figcaption span{color:#bd9f58;font-size:25px;margin-right:10px}
.sports{display:flex;justify-content:space-between;align-items:center;padding:29px 0;border-block:1px solid var(--line);font-size:13px;letter-spacing:2px}
.sports>div{display:flex;align-items:center;gap:23px}
.sports i{width:3px;height:3px;background:#a5b49c;border-radius:50%}
.sports-label,.sports-end{font-size:11px;color:var(--muted);letter-spacing:1px}
.intro{text-align:center;padding-block:105px 58px}
.intro .eyebrow{color:#78917a;font-size:10px;margin-bottom:20px}
h2{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;font-weight:600;letter-spacing:2px;font-size:32px;line-height:1.7}
.intro h2{margin-bottom:23px}
.intro>p:last-child{color:var(--muted);font-size:14px;line-height:2.3;letter-spacing:1px}
.mobile-break{display:none}
.features{display:grid;grid-template-columns:repeat(3,1fr);padding-bottom:82px}
.feature{padding:0 36px}
.feature:first-child{padding-left:12px}
.feature:last-child{padding-right:12px}
.feature+.feature{border-left:1px solid var(--line)}
.feature-mark{width:82px;height:77px;display:grid;place-items:center;margin-bottom:26px;border-radius:43% 57% 60% 40% / 59% 41% 59% 41%;transform:rotate(-5deg)}
.blue{background:radial-gradient(ellipse,#c5dce6 15%,#d9e7e85c 73%,transparent 74%)}
.green{background:radial-gradient(ellipse,#cbdcc0 15%,#dfe8d45c 73%,transparent 74%)}
.yellow{background:radial-gradient(ellipse,#f0dfa1 15%,#eee5c05c 73%,transparent 74%)}
.feature-mark svg{width:53px;height:53px;fill:none;stroke:#5e7264;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform:rotate(5deg)}
.feature-number{font-size:10px;letter-spacing:2px;color:#7b8d80;margin-bottom:15px}
.feature h3{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;font-size:23px;font-weight:600;letter-spacing:1px;margin-bottom:18px}
.feature>p:not(.feature-number){font-size:13px;line-height:2.1;color:var(--muted);margin-bottom:22px}
.feature-detail{font-size:10px;letter-spacing:1px;color:#788770}
.privacy{background:#e9eee2;display:flex;align-items:center;padding:32px 42px;border-radius:3px 35px 4px 32px;gap:26px}
.privacy-icon svg{width:44px;height:44px;fill:none;stroke:#7c947b;stroke-width:1.3}
.privacy h2{font-family:inherit;font-size:18px;margin-bottom:8px;letter-spacing:1px}
.privacy p{font-size:12px;line-height:2;color:#65745f;margin:0}
.privacy>a{margin-left:auto;font-size:12px;white-space:nowrap}
.privacy>a span{margin-left:14px}
.closing{text-align:center;position:relative;padding:100px 0 85px}
.closing-spark{display:block;color:#c6ad68;font-size:37px;font-weight:400;margin-bottom:24px}
.closing .eyebrow{font-size:10px;color:#78917a;margin-bottom:20px}
.closing h2{font-size:39px;line-height:1.6;margin-bottom:25px}
.closing-link{display:inline-flex;gap:32px;background:var(--green);color:white;border-radius:30px;padding:16px 29px;font-size:13px;letter-spacing:1px}
.closing-link:hover{color:white;background:#2e4d3c;transform:translateY(-2px)}
.footer{display:flex;justify-content:space-between;align-items:center;padding-block:28px 38px;border-top:1px solid var(--line)}
.footer .brand{font-size:18px;letter-spacing:2px}
.footer-tagline{font-size:10px;color:var(--muted);font-weight:400;letter-spacing:1px;margin-left:6px}
.footer>div{display:flex;gap:24px;font-size:10px;color:var(--muted)}

@media(min-width:1450px){.hero{min-height:720px}
}

@media(max-width:1050px){.wrap{width:calc(100% - 64px)}
.brand-en{display:none}
.hero{min-height:600px}
h1{font-size:46px;letter-spacing:2px}
.hero-description{font-size:13px}
.sports-end{display:none}
.feature{padding-inline:24px}
.feature h3{font-size:20px}
.footer-tagline{display:none}
}

@media(max-width:700px){.wrap{width:calc(100% - 40px)}
.header{height:86px}
.brand{font-size:21px;gap:9px}
.brand-dots i{width:7px;height:17px}
.brand-dots i:nth-child(2){height:14px}
.brand-dots i:nth-child(3){height:12px}
nav{gap:18px;font-size:11px}
.nav-about{display:none}
.nav-download{padding:9px 13px}
.nav-download span{margin-left:5px}
.hero{grid-template-columns:1fr;padding-top:48px;padding-bottom:35px;gap:22px}
.hero-copy{text-align:center}
.hero .eyebrow{justify-content:center;font-size:10px;letter-spacing:1.5px;margin-bottom:20px}
h1{font-size:clamp(32px,10vw,44px);line-height:1.5;margin-bottom:21px;letter-spacing:3px}
.hero-description{line-height:2.15;margin-bottom:24px}
.hero-art{width:min(100%,420px);margin-inline:auto}
.hero-art figcaption{font-size:14px;margin-top:-5px}
.sports{flex-direction:column;gap:20px;padding-block:24px}
.sports>div{gap:20px}
.intro{padding-block:66px 35px}
.intro h2{font-size:27px}
.intro>p:last-child{font-size:12px;letter-spacing:.4px}
.mobile-break{display:block}
.features{grid-template-columns:1fr;padding-bottom:40px}
.feature,.feature:first-child,.feature:last-child{padding:30px 12px;display:grid;grid-template-columns:78px 1fr;column-gap:20px}
.feature+.feature{border-left:0;border-top:1px solid var(--line)}
.feature-mark{grid-column:1;grid-row:1 / 5;margin:2px 0 0;width:75px;height:75px}
.feature-number,.feature h3,.feature>p,.feature-detail{grid-column:2}
.feature h3{font-size:21px;margin-bottom:12px}
.feature-number{margin-bottom:10px}
.feature>p:not(.feature-number){margin-bottom:14px}
.privacy{padding:29px 25px;display:grid;grid-template-columns:32px 1fr;gap:16px}
.privacy-icon svg{width:32px}
.privacy h2{font-size:16px}
.privacy p{font-size:11px}
.privacy p br{display:none}
.privacy>a{grid-column:2;margin:0;font-size:11px}
.closing{padding-block:65px}
.closing h2{font-size:34px}
.closing .download-note{font-size:10px}
.footer{flex-direction:column;gap:25px;padding-block:27px}
.footer>div{gap:23px}
}

@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}
a{transition:none}
}