@charset "UTF-8";
:root { --ink:#171b19; --paper:#f7f7f0; --muted:#626960; --line:#dedfd6; --lime:#d3ef9b; --serif:Georgia,'Times New Roman',serif; --font:'Segoe UI',Arial,'Microsoft YaHei','Yu Gothic','Meiryo','Malgun Gothic','PingFang SC',sans-serif; --container:1224px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:108px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; line-height:1.6; }
body[data-language="zh"] { letter-spacing:.015em; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
img,svg { max-width:100%; }
img { display:block; width:100%; height:auto; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #66814a; outline-offset:5px; }
::selection { color:var(--ink); background:var(--lime); }
[hidden] { display:none!important; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1.15; font-weight:500; }
h1,h2,h3 { overflow-wrap:break-word; hyphens:auto; }
.container { width:min(var(--container),calc(100% - 112px)); margin-inline:auto; }
.section { padding-block:104px; }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.17em; line-height:1.5; text-transform:uppercase; }
body[data-language="zh"] .eyebrow { letter-spacing:.14em; }
h2 { font-size:clamp(30px,3.35vw,48px); letter-spacing:-.04em; }
body[data-language="zh"] h2 { letter-spacing:-.035em; line-height:1.3; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:56px; margin-bottom:46px; }
.section-head .eyebrow { margin-bottom:18px; color:var(--muted); }
.section-intro { max-width:390px; font-size:15px; color:var(--muted); line-height:1.85; flex-shrink:0; }
.section-intro .text-link { margin-top:22px; color:var(--ink); }
.button { display:inline-flex; gap:20px; align-items:center; justify-content:center; padding:14px 23px; border:1px solid transparent; border-radius:4px; min-height:52px; font-size:14px; font-weight:500; transition:background .2s,transform .2s; }
.button svg,.text-link svg,.card-link svg,.footer-links svg { width:20px; height:20px; flex-shrink:0; }
.button:hover { transform:translateY(-2px); }
.button-lime { background:var(--lime); color:var(--ink); }
.button-lime:hover { background:#e4f8bd; }
.button-outline { color:#e8ebe3; border-color:#4b514b; background:transparent; }
.button-outline:hover { background:#29332b; }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { background:#344037; }
.text-link { display:inline-flex; align-items:center; gap:18px; padding-block:5px; font-size:14px; border-bottom:1px solid currentColor; }
.text-link:hover svg,.card-link:hover svg { transform:translateX(4px); }
.text-link svg,.card-link svg { transition:transform .2s; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; color:var(--ink); background:var(--lime); padding:12px 24px; }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:20; background:var(--ink); color:var(--paper); border-bottom:1px solid #31362f; }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:88px; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:23px; font-weight:600; line-height:1; letter-spacing:-.045em; white-space:nowrap; }
.brand-mark { width:40px; height:40px; object-fit:contain; }
.brand-dot { color:#ff9446; }
.main-nav { display:flex; align-items:center; gap:32px; font-size:12px; }
.main-nav a { display:inline-flex; align-items:center; gap:9px; padding-block:12px; }
.main-nav a:hover { color:var(--lime); }
.main-nav svg { width:15px; height:15px; }
.language-selector { position:relative; border-left:1px solid #4b5048; padding-left:24px; }
.language-selector summary { display:flex; align-items:center; gap:7px; padding-block:12px; cursor:pointer; list-style:none; white-space:nowrap; }
.language-selector summary::-webkit-details-marker { display:none; }
.language-selector summary svg { width:16px; height:16px; }
.language-chevron { color:#a0af93; margin-left:2px; }
.language-options { position:absolute; right:0; top:calc(100% + 4px); min-width:160px; padding:7px; border:1px solid #536148; border-radius:4px; background:#1e271d; box-shadow:0 12px 30px #0003; z-index:30; }
.main-nav .language-option { display:flex; justify-content:space-between; gap:14px; padding:9px 11px; font-size:12px; border-radius:3px; }
.language-option:hover,.language-option[aria-current] { background:#344129; color:var(--lime); }
.main-nav .nav-github { border:1px solid #4b514b; padding:9px 15px; border-radius:4px; }
.menu-toggle { display:none; width:44px; height:44px; padding:12px 9px; background:none; color:var(--paper); border:1px solid #576052; border-radius:4px; }
.menu-toggle span { display:block; height:1px; background:currentColor; margin:5px 0; }
.site-footer { padding-top:64px; padding-bottom:24px; background:var(--ink); color:#e5e8df; }
.footer-main { display:flex; justify-content:space-between; gap:40px; padding-bottom:60px; }
.footer-main p { color:#a3ab9d; font-size:13px; margin-top:20px; }
.footer-links { display:flex; gap:32px; align-items:flex-start; font-size:13px; padding-top:7px; }
.footer-links a { display:inline-flex; align-items:center; gap:8px; }
.footer-links a:hover { color:var(--lime); }
.footer-links svg { width:15px; height:15px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-top:24px; border-top:1px solid #383e34; font-size:10px; color:#9ca695; }
.footer-bottom a { display:flex; width:28px; height:28px; color:var(--lime); }
.footer-bottom a svg { width:22px; height:22px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }