:root { color-scheme: light; --tg-text: #1f2d3d; --tg-muted: #526579; --tg-line: #dfe6ee; --tg-blue: #087fb5; --download-clearance: calc(100px + env(safe-area-inset-bottom, 0px)); } * { box-sizing: border-box; } html { scroll-padding-bottom: var(--download-clearance); } body { margin: 0; padding-bottom: var(--download-clearance); background: #fff; color: var(--tg-text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif; line-height: 1.75; } a { color: var(--tg-blue); text-underline-offset: 4px; } a:hover { color: #066b99; } a:focus-visible, select:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: 5px; } ::selection { background: #d6effb; } .header { border-bottom: 1px solid var(--tg-line); } .header-inner { max-width: 1080px; margin-inline: auto; padding: 18px 24px; display: flex; align-items: center; gap: 32px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--tg-text); font-size: 16px; font-weight: 600; text-decoration: none; } .brand img { width: 32px; height: 32px; } .navigation { display: flex; flex-wrap: wrap; gap: 24px; margin-inline-end: auto; font-size: 14px; } .navigation a { color: var(--tg-muted); text-decoration: none; } .navigation a[aria-current] { color: var(--tg-text); font-weight: 600; } .navigation a:hover { color: var(--tg-blue); } .language-selector select { width: 144px; max-width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--tg-line); border-radius: 6px; background: #fff; color: var(--tg-text); font: inherit; font-size: 13px; } main { max-width: 1080px; margin-inline: auto; padding: 36px 24px 64px; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; color: var(--tg-muted); font-size: 13px; } .breadcrumb a { color: var(--tg-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--tg-blue); } .faq-article-header { margin-bottom: 24px; } .faq-article h1 { margin: 0; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.45; letter-spacing: -.025em; font-weight: 650; overflow-wrap: anywhere; } .faq-answer, .faq-guide-section p, .faq-guide-section li { font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; } .faq-answer { margin: 0 0 16px; } .faq-article p { margin-block: 0 16px; } .faq-article a { overflow-wrap: anywhere; } .faq-toc { margin: 28px 0 36px; padding: 18px 22px; border-inline-start: 2px solid var(--tg-line); background: #f7f9fb; } .faq-toc h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; } .faq-toc ul { margin: 0; padding: 0; list-style: none; } .faq-toc li { font-size: 14px; line-height: 1.65; padding-block: 4px; } .faq-toc a { text-decoration: none; } .faq-guide-section { scroll-margin-top: 24px; } .faq-guide-section h2 { margin: 36px 0 16px; padding-top: 24px; border-top: 1px solid var(--tg-line); font-size: 23px; line-height: 1.5; font-weight: 600; } .faq-guide-section h3 { margin: 24px 0 10px; font-size: 18px; line-height: 1.6; font-weight: 600; } .faq-guide-section ul, .faq-guide-section ol { padding-inline-start: 24px; } .faq-guide-section li + li { margin-top: 8px; } .faq-guide-section li::marker { color: var(--tg-muted); } .faq-guide-section code { padding: 2px 5px; background: #f2f5f8; border-radius: 3px; font-size: .9em; overflow-wrap: anywhere; } .faq-article img { max-width: 100%; height: auto; } .faq-screenshot { margin: 24px 0 32px; } .faq-screenshot > a { display: block; width: fit-content; max-width: 100%; } .faq-screenshot img { display: block; width: auto; max-width: min(100%, 380px); max-height: 560px; object-fit: contain; border: 1px solid var(--tg-line); border-radius: 8px; } .faq-screenshot figcaption { max-width: 640px; margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--tg-muted); } .faq-screenshot-error img { width: min(100%, 380px); height: auto; aspect-ratio: 1080 / 950; max-height: none; object-fit: cover; object-position: bottom; } .article-action { position: fixed; z-index: 30; inset-inline: 0; bottom: 0; display: flex; justify-content: center; padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); pointer-events: none; } .faq-download { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 360px); min-height: 58px; padding: 14px 28px; border: 1px solid #0674a7; border-radius: 12px; background: #087fb5; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.5; text-align: center; overflow-wrap: anywhere; text-decoration: none; box-shadow: 0 6px 20px rgba(8, 127, 181, .28), 0 0 0 4px #fff; pointer-events: auto; transition: background-color .15s ease, box-shadow .15s ease; } .faq-download:hover { background: #066b99; color: #fff; box-shadow: 0 8px 24px rgba(8, 127, 181, .34), 0 0 0 4px #fff; } .faq-download:active { background: #055a82; } .related-shell { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--tg-line); } .related-shell h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; } .related-list { list-style: none; padding: 0; margin: 0; } .related-list li + li { border-top: 1px solid #edf0f3; } .related-list a { display: block; padding-block: 12px; font-size: 14px; line-height: 1.7; text-decoration: none; } .site-footer { border-top: 1px solid var(--tg-line); } .footer-inner { max-width: 1080px; margin-inline: auto; padding: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; color: var(--tg-muted); font-size: 12px; } .footer-inner nav { display: flex; flex-wrap: wrap; gap: 20px; } .footer-inner a { color: var(--tg-muted); text-decoration: none; } .footer-inner a:hover { color: var(--tg-blue); } @media (max-width: 720px) { .header-inner { padding: 16px 20px; flex-wrap: wrap; gap: 16px; } .language-selector { margin-inline-start: auto; } .navigation { order: 3; width: 100%; gap: 20px; } main { padding: 24px 20px 40px; } .breadcrumb { margin-bottom: 22px; } .faq-toc { padding: 16px; } .faq-guide-section h2 { font-size: 21px; } .footer-inner { padding: 20px; } } @media (max-width: 480px) { .faq-download { width: 100%; } } @media (max-height: 480px) and (orientation: landscape) { .article-action { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } .faq-download { min-height: 48px; padding-block: 10px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .faq-download { transition: none; } }