:root { color-scheme: dark; }
html { scroll-behavior: smooth; background: #080A0A; }
html, body { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
body { margin: 0; background: #080A0A; color: #F3F5EF; font-family: Inter, "PingFang TC", "Microsoft JhengHei", sans-serif; }
img, svg { max-width: 100%; }
.hairline { border-color: rgba(226,238,220,.14); }
.lang-switcher, .article-page header [class~="text-[#A5AEA4]"] { border: 1px solid rgba(255,255,255,.85); border-radius: 9999px; padding: .35rem 24px !important; gap: 2px !important; background: transparent; }
.article-page #menuButton { position: relative; width: 38px; height: 38px; padding: 0; font-size: 0; color: #F3F5EF; }
.article-page #menuButton::before { content: ""; position: absolute; left: 9px; top: 18px; width: 18px; height: 1px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.article-page #mobileMenu nav { gap: 32px; }
.article-page #mobileMenu { padding-top: 32px; padding-bottom: 32px; }
.article-page header > div > a:first-child { width: 140px; height: 28px; background: url("logo/黑.svg") center / contain no-repeat; }
.article-page header > div > a:first-child > span { display: none; }
.article-page footer > div > div > p:first-child { width: 140px; height: 28px; background: url("logo/黑.svg") center / contain no-repeat; font-size: 0; }
@media (min-width: 1024px) {
  .article-page footer > div { display: grid; grid-template-columns: 1fr auto auto; column-gap: 24px; align-items: center; justify-content: start; }
  .article-page footer > div > div:first-child { display: contents; }
  .article-page footer > div > div:first-child > p:first-child { grid-column: 1; }
  .article-page footer > div > div:first-child > p:nth-child(2) { grid-column: 2; margin-right: 0; }
  .article-page footer > div > div:last-child { grid-column: 3; }
}
.article-page header nav a.text-white, .article-page header nav a[aria-current="page"] { color: #B8F34A; }
.focus-ring:focus-visible { outline: 2px solid #B8F34A; outline-offset: 4px; }
.grid-bg { background-image: linear-gradient(rgba(226,238,220,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(226,238,220,.05) 1px, transparent 1px); background-size: 48px 48px; }
.article-page h1, .article-page h2, .article-page h3 { letter-spacing: -.045em; }
.article-page h1 { max-width: 36rem; font-size: 52px; line-height: 1.08; }
.article-page h2 { font-size: 32px; line-height: 1.25; }
.article-page p { color: #A5AEA4; }
.article-page .lead { color: #D7DED6; font-size: 16px; line-height: 2; }
.article-page .article-copy p { font-size: 1rem; line-height: 2; }
.article-page main > section > .mx-auto { max-width: 1440px; }
.article-page .article-copy { max-width: none; }
@media (min-width: 1024px) {
  .article-page main > section:nth-of-type(2) { column-gap: 2rem; }
  .article-page main > section:nth-of-type(2) aside { margin-left: -3rem; }
  .article-page main > section:nth-of-type(2) .article-copy { margin-right: -3rem; }
}
.article-page .article-copy h2 { margin-top: 3rem; margin-bottom: 1rem; }
.article-page .article-copy h3 { margin-top: 1rem; margin-bottom: .6rem; font-size: 1.25rem; }
.article-page .article-copy ul { margin-top: 1.25rem; display: grid; gap: .8rem; padding-left: 0; list-style: none; color: #A5AEA4; }
.article-page .article-copy li { padding-left: 0; line-height: 1.8; }
.article-page .article-image { aspect-ratio: 16 / 7; }
.article-page .article-image img { object-position: top; filter: saturate(.78); transition: transform .5s ease; }
.article-page .article-image:hover img { transform: scale(1.03); }
.article-page .note { position: relative; border-left: 0; color: #D7DED6; }
.article-page .note::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 2rem; transform: translateY(-50%); background: #B8F34A; }
.article-page .step-card { border-top: 1px solid rgba(226,238,220,.14); padding-top: 2rem; }
.article-page .related-card:hover { border-color: rgba(184,243,74,.55); }

@media (max-width: 1023px) {
  .article-page h1 { max-width: 100%; font-size: clamp(36px, 11vw, 52px); line-height: 1.15; overflow-wrap: anywhere; }
  .article-page main > section > .mx-auto { width: 100%; min-width: 0; }
  .article-page main > section:nth-of-type(2) aside,
  .article-page main > section:nth-of-type(2) .article-copy { margin-left: 0; margin-right: 0; min-width: 0; }
  .article-page .article-image { aspect-ratio: 16 / 9; }
  .article-page footer > div { width: 100%; min-width: 0; box-sizing: border-box; }
}