*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 24px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--f2)/1.6 var(--sans);font-variant-numeric:tabular-nums;overflow-x:clip}
html[lang^=zh] body{line-height:1.75}
img,video,svg,canvas{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px;border-radius:6px}
.dark :focus-visible{outline-color:var(--lime)}
button{font:inherit;color:inherit;cursor:pointer}
.skip{position:absolute;left:16px;top:-80px;background:var(--lime);color:var(--lime-ink);padding:12px 16px;border-radius:12px;z-index:100;font-weight:700}
.skip:focus{top:8px}
html.wait main,html.wait footer{visibility:hidden}
noscript p{padding:16px}
.nf{padding-top:20vh;padding-bottom:20vh}
.nf h1{font-size:var(--f5);margin-bottom:var(--s4)}

.wrap{max-width:1312px;margin:0 auto;padding:0 var(--s5)}
.wrap.narrow{max-width:1040px}
@media (max-width:900px){.wrap{padding:0 var(--s2)}}

.lead{font-size:var(--f3);line-height:1.45;max-width:36ch;color:var(--fg)}
html[lang^=zh] .lead{line-height:1.6}
.note{font-size:var(--f1);color:var(--mute);max-width:66ch}
.mute{color:var(--mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--r-pill);font-weight:650;text-decoration:none;border:0;transition:transform .2s var(--ease),background-color .2s}
.btn.primary{background:var(--lime);color:var(--lime-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 20px -8px rgba(61,107,15,.5)}
.btn.primary:hover{background:var(--lime-hi);transform:translateY(-1px)}
.btn.primary:active{transform:translateY(0)}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--link);text-underline-offset:4px}
.tlink:hover{text-decoration-thickness:2px}
.dark .tlink{color:var(--lime)}

/* scroll reveal: content is visible without JS; JS adds .js to opt into the reveal */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}