:root { --ink:#193234; --muted:#617677; --paper:#f5f3ee; --surface:#fff; --line:#d8dfd9; --accent:#116c59; font-family:"Segoe UI","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; }
[hidden] { display:none !important; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #c27c22; outline-offset:4px; }
.site-header { min-height:82px; padding:20px max(24px,calc((100vw - 1220px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:var(--paper); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:750; font-size:20px; white-space:nowrap; }
.brand span { font-weight:450; }
.site-header nav { display:flex; gap:28px; flex-wrap:wrap; }
.site-header nav a { text-decoration:none; font-size:14px; color:var(--ink); }
main { width:min(1220px,calc(100% - 48px)); margin:auto; padding:36px 0 70px; }
h1,h2,h3 { margin:0 0 18px; }
h1 { font-size:clamp(40px,5.6vw,72px); line-height:1.17; font-weight:750; letter-spacing:-.045em; }
h2 { font-size:clamp(28px,3vw,40px); letter-spacing:-.025em; }
h3 { font-size:23px; }
p,li { line-height:1.85; }
p { margin:0 0 18px; }
.lede { font-size:20px; color:var(--muted); max-width:35em; }
.eyebrow { font-size:12px; letter-spacing:.14em; font-weight:750; color:var(--accent); margin-bottom:18px; }
.hero { display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:32px; padding:38px 0 66px; }
.hero-actions { display:flex; gap:24px; align-items:center; margin:30px 0 20px; flex-wrap:wrap; }
.button,button { display:inline-flex; justify-content:center; align-items:center; gap:16px; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:white; padding:14px 22px; font-weight:650; text-decoration:none; cursor:pointer; }
.button.secondary,button.secondary { color:var(--ink); border-color:var(--line); background:var(--surface); }
button:disabled { opacity:.5; cursor:not-allowed; }
.text-link { font-size:14px; text-decoration:none; font-weight:650; }
.fineprint,figcaption { font-size:12px; color:var(--muted); }
.product-figure { margin:0; }
.product-figure img { max-width:100%; height:auto; display:block; }
.product-figure figcaption { margin:8px 12px; }
.section { padding:66px 0; border-top:1px solid var(--line); }
.section-heading { max-width:700px; margin-bottom:30px; }
.section-heading p:not(.eyebrow) { color:var(--muted); }
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.product-card { background:var(--surface); padding:34px; border:1px solid var(--line); border-radius:10px; }
.product-number { display:block; color:var(--accent); font-size:12px; letter-spacing:.12em; margin-bottom:24px; }
.product-card p { color:var(--muted); }
.product-card ul { padding-left:20px; }
.game-reference { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:32px; margin-top:24px; background:#e7ede4; border-radius:10px; }
.game-reference p { max-width:760px; font-size:14px; }
.game-reference .button { flex-shrink:0; }
.segmented { display:inline-flex; border:1px solid var(--line); border-radius:6px; padding:4px; background:white; margin-bottom:20px; gap:4px; }
.segmented button { background:transparent; border:0; color:var(--muted); padding:12px 20px; font-size:14px; }
.segmented button[aria-pressed="true"] { background:var(--ink); color:white; }
.notice { padding:16px 20px; background:#fff3d9; border-left:3px solid #b98731; border-radius:4px; font-size:14px; }
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin:24px 0; }
.plan-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; padding:28px; background:white; }
.plan-card h3 { font-size:24px; }
.plan-price { font-size:38px; font-weight:750; margin:8px 0; letter-spacing:-.04em; }
.plan-price small { font-size:13px; font-weight:400; letter-spacing:0; margin-left:5px; }
.plan-card ul { padding-left:18px; font-size:14px; margin:20px 0 30px; flex:1; }
.plan-card li { margin:4px 0; }
.plan-card .button { width:100%; }
.download-section { display:grid; grid-template-columns:1.15fr 1fr; gap:60px; }
.getting-started { padding-left:22px; }
.download-item { display:block; padding:22px; margin-bottom:14px; border:1px solid var(--line); border-radius:10px; background:white; }
.download-item strong { display:block; margin-bottom:10px; }
.download-item p { font-size:13px; color:var(--muted); }
.download-item a { margin-right:16px; font-size:14px; }
.faq details { padding:22px 0; border-bottom:1px solid var(--line); }
.faq summary { font-weight:650; cursor:pointer; font-size:18px; }
.faq details p { max-width:820px; margin:16px 0 0; color:var(--muted); }
.site-footer { background:#193234; color:#ecf3e9; display:flex; justify-content:space-between; gap:30px; padding:44px max(24px,calc((100vw - 1220px)/2)); }
.site-footer p { margin:6px 0 0; font-size:12px; color:#b9cbbe; }
.site-footer nav { display:flex; gap:18px; flex-wrap:wrap; align-content:start; }
.site-footer a { color:#d4e5d5; font-size:13px; }
dialog { width:min(560px,calc(100% - 32px)); padding:38px; border:1px solid var(--line); border-radius:12px; color:var(--ink); }
dialog::backdrop { background:#102524aa; }
dialog label { display:block; margin:16px 0 6px; font-weight:650; }
dialog input,dialog select { width:100%; padding:12px; border:1px solid var(--line); border-radius:5px; background:white; color:var(--ink); font:inherit; margin-bottom:12px; }
.dialog-close { float:right; padding:0; width:32px; height:32px; background:transparent; color:var(--ink); border:0; font-size:25px; }
.prose { max-width:820px; }
.prose h1 { font-size:44px; margin-top:28px; }
.prose h2 { font-size:26px; margin-top:36px; }
.prose footer { display:flex; gap:20px; padding-top:36px; }
@media(max-width:950px) { .hero { grid-template-columns:1fr; } .hero>div { max-width:740px; } .product-figure { max-width:760px; } .game-reference { align-items:start; flex-direction:column; } .download-section { gap:24px; } }
@media(max-width:640px) { main { width:calc(100% - 32px); } .site-header { padding:18px 16px; flex-wrap:wrap; } .site-header nav { gap:20px; } .hero { padding:22px 0 40px; gap:10px; } .product-grid,.download-section { grid-template-columns:1fr; } .section { padding:40px 0; } .product-card,.game-reference { padding:24px; } .segmented { display:flex; } .segmented button { padding:12px; flex:1; } .site-footer { flex-direction:column; padding:32px 16px; } .plan-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }