@font-face{font-family:"Noto Sans SC";src:url("/seo/fonts/NotoSansSC-Regular.ttf");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif SC";src:url("/seo/fonts/NotoSerifSC-Bold.ttf");font-weight:700;font-display:swap}
*{box-sizing:border-box}
html{background:#171B22;color:#F3EEE4;font-family:"Noto Sans SC",sans-serif;font-size:18px;line-height:1.6}
body{margin:0;overflow-wrap:anywhere}
.shell{max-width:1020px;margin:0 auto;padding:20px}
.site-header,nav{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.site-header{justify-content:space-between;border-bottom:1px solid #4D5157;padding-bottom:20px}
a{color:#D3B078;text-underline-offset:4px}
a:focus-visible{outline:2px solid #D3B078;outline-offset:4px}
.brand,h1,h2,h3,.mark{font-family:"Noto Serif SC",serif;font-weight:700}
.brand{font-size:24px;text-decoration:none;color:#F3EEE4}
nav,.eyebrow,.breadcrumb,.note,footer{font-size:16px}
.language{padding:8px 12px;border:1px solid #4D5157;border-radius:12px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.hero{padding:40px 0;border-bottom:1px solid #4D5157}
.eyebrow,.mark{color:#D3B078}
h1{font-size:40px;line-height:1.5;margin:16px 0;color:#D3B078}
h2{font-size:24px;color:#D3B078;margin:40px 0 16px}
h3{font-size:20px;margin:8px 0}
.lead{font-size:18px;max-width:680px}
.mark{font-size:32px;margin:20px 0}
.cta{display:inline-flex;align-items:center;min-height:44px;padding:12px 20px;background:#AD4D3E;color:#FFFFFF;border-radius:12px;text-decoration:none}
.cta:hover{outline:1px solid #EDAE9D}
.note,footer,.guide-list p{color:#C8C3B8}
.breadcrumb{margin-top:20px}
p,li{margin-block:16px}
article{max-width:680px}
ul{padding-left:40px}
.guide-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.guide-list article{padding:16px 0;border-top:1px solid #4D5157}
footer{margin-top:40px;padding-top:20px;border-top:1px solid #4D5157}
footer nav{margin-block:16px}