:root { --ink:#1e293b; --blue:#1d4ed8; --paper:#fff; --mist:#f1f5f9; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--mist); font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--blue); }
.site-header { background:#212529; color:#fff; padding:.5rem 0; min-height:56px; }
.site-header .wrap { width:min(1140px,calc(100% - 2rem)); display:flex; align-items:center; }
.navbar { background:#212529; color:#fff; min-height:56px; padding:.5rem 0; }
.navbar .container { width:min(1140px,calc(100% - 2rem)); margin:auto; display:flex; align-items:center; }
.navbar-brand { color:#0dcaf0; font-size:1.15rem; font-weight:750; text-decoration:none; }
.ms-auto { margin-left:auto; }
.btn { display:inline-block; border:1px solid #f8f9fa; border-radius:.25rem; color:#f8f9fa; font:inherit; font-size:.875rem; line-height:1.5; padding:.2rem .48rem; text-decoration:none; }
.btn:hover, .btn:focus { background:#f8f9fa; color:#212529; }
.btn.active-language { background:#f8f9fa; color:#212529; font-weight:700; }
.me-1 { margin-right:.25rem; }
.wrap { width:min(920px,calc(100% - 2rem)); margin:auto; }
.brand { color:#0dcaf0; font-size:1.15rem; font-weight:750; text-decoration:none; }
.nav { float:right; display:flex; gap:1rem; }
.nav a { color:#dbeafe; }
.guide-language-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.25rem; max-width:72%; }
.guide-language-nav a { color:#f8f9fa; font-size:.875rem; line-height:1.5; text-decoration:none; }
.guide-language-nav .guide-index-link, .guide-language-nav .guide-language-button { border:1px solid #f8f9fa; border-radius:.25rem; padding:.2rem .48rem; }
.guide-language-nav .guide-index-link { margin-right:.35rem; color:#f8f9fa; }
.guide-language-nav .guide-index-link:hover, .guide-language-nav .guide-language-button:hover { background:#f8f9fa; color:#212529; }
main { margin:2rem auto; padding:clamp(1.25rem,4vw,3rem); background:var(--paper); border-radius:14px; box-shadow:0 8px 30px #0f172a12; }
h1 { font-size:clamp(2rem,5vw,3rem); line-height:1.12; margin:0 0 1rem; }
h2 { margin-top:2.25rem; line-height:1.25; }
.lede { font-size:1.15rem; color:#475569; }
.note { padding:1rem 1.25rem; background:#eff6ff; border-left:4px solid #2563eb; border-radius:4px; }
.steps li { margin:.6rem 0; }
.meta { color:#64748b; font-size:.9rem; }
.footer { background:#1e1e24; color:#f8f9fa; padding:30px 0; font-size:.9rem; }
.footer .container { width:min(1140px,calc(100% - 2rem)); margin:auto; text-align:center; }
.footer p { margin:.25rem auto; }
.footer a { color:#f8f9fa; }
.footer .footer-note { max-width:600px; color:#cbd5e1; }
.adsense-slot { min-height:90px; margin:1.5rem auto; text-align:center; }
@media (max-width:640px) { .site-header .wrap { align-items:flex-start; flex-direction:column; } .nav, .guide-language-nav { float:none; max-width:none; justify-content:flex-start; margin-top:.5rem; } }
@media (max-width:640px) { .navbar .container { align-items:flex-start; flex-direction:column; } .navbar .ms-auto { margin-left:0; margin-top:.5rem; } }