:root{
  --ink:#14161a; --body:#33383f; --muted:#6b7280;
  --brand:#1f6feb; --brand-ink:#1550b3; --brand-2:#3f8cff; --accent:#12b886;
  --bg:#ffffff; --surface:#f6f8fb; --surface-2:#eef2f8; --line:#e6e9ef;
  --maxw:1120px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--sans); color:var(--body); background:var(--bg); line-height:1.68; font-size:17px; -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
a{color:var(--brand-ink); text-decoration:none;} a:hover{color:var(--brand);}
h1,h2,h3{color:var(--ink); letter-spacing:-.02em; line-height:1.16; margin:0;}

.site-head{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(8px); z-index:20;}
.head-in{display:flex; align-items:center; gap:24px; height:66px;}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; color:var(--ink); letter-spacing:-.03em;}
.logo .mark{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:8px; background:var(--brand); color:#fff; font-weight:900; font-size:15px; font-family:var(--serif);}
.logo b{color:var(--brand);}
.nav{display:flex; gap:20px; margin-left:8px; font-size:14.5px; font-weight:600;}
.nav a{color:var(--body);} .nav a:hover{color:var(--brand);}
.head-cta{margin-left:auto;}
.btn{display:inline-block; background:var(--brand); color:#fff; font-weight:700; font-size:14px; padding:9px 16px; border-radius:9px;}
.btn:hover{background:var(--brand-ink); color:#fff;}
@media(max-width:860px){ .nav{display:none;} }

.article{max-width:760px; margin:0 auto; padding:0 22px;}
.breadcrumbs{font-size:13px; color:var(--muted); margin:26px 0 0;}
.breadcrumbs a{color:var(--muted);} .breadcrumbs a:hover{color:var(--brand);}
.breadcrumbs span{margin:0 7px; color:#c9ced8;}
.kicker{display:inline-block; margin-top:18px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:#e9f1ff; border-radius:999px; padding:6px 13px;}
h1{font-size:clamp(28px,4vw,42px); margin-top:14px; font-weight:850;}
.meta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px; padding-bottom:22px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--muted);}
.avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px;}
.avatar-wrap{display:flex; align-items:center; gap:9px;} .avatar-wrap b{color:var(--ink);}
.dotsep{width:3px;height:3px;border-radius:50%;background:#c9ced8;display:inline-block;}

.prose{padding:8px 0 10px;}
.prose p{margin:18px 0;}
.prose h2{font-size:25px; font-weight:850; margin:38px 0 6px; scroll-margin-top:20px;}
.prose h2 .n{color:var(--brand); font-family:var(--serif);}
.prose ul{margin:14px 0; padding-left:22px;} .prose li{margin:7px 0;}
.lead{font-size:19px; color:#39393f;}
.facts{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px; padding:0; list-style:none;}
.facts li{font-size:12.5px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 11px; color:#3a3a42; margin:0;}
.facts li b{color:var(--brand-ink);}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:22px 0;}
@media(max-width:560px){ .grid{grid-template-columns:1fr;} }
.card{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--surface);}
.card b{display:block; color:var(--ink); font-size:15.5px; margin-bottom:3px;}
.card a{display:block; color:var(--ink); font-size:15.5px; font-weight:700; margin-bottom:3px;}
.card a:hover{color:var(--brand);}
.card span{font-size:13.5px; color:var(--muted);}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:24px 0;}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px;}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
thead th{background:var(--surface-2); color:var(--brand-ink); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;}
tbody tr:last-child td{border-bottom:none;} td:first-child{font-weight:700; color:var(--ink);}

.faq details{border:1px solid var(--line); border-radius:12px; padding:2px 18px; margin:10px 0; background:#fff;}
.faq details[open]{background:var(--surface);}
.faq summary{cursor:pointer; font-weight:700; font-size:16.5px; padding:15px 0; list-style:none; position:relative; padding-right:26px; color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:2px; top:12px; font-size:22px; color:var(--brand);}
.faq details[open] summary::after{content:"\2013";}
.faq .ans{padding:0 0 16px; font-size:15.5px; color:#3a3a42;}

.cta{background:#0f1319; color:#fff; border-radius:16px; padding:28px; margin:34px 0; text-align:center; background-image:radial-gradient(120% 120% at 100% 0%, rgba(31,111,235,.4), transparent 55%);}
.cta h3{color:#fff; font-size:21px;} .cta p{color:rgba(255,255,255,.82); margin:10px auto 16px; max-width:48ch; font-size:15px;}
.cta a{display:inline-block; background:var(--brand); color:#fff; font-weight:800; padding:12px 22px; border-radius:10px;} .cta a:hover{background:var(--brand-2);}

.related{margin:30px 0; font-size:15px;} .related b{color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-size:12px;}

footer.site{border-top:1px solid var(--line); margin-top:26px; padding:30px 0; background:var(--surface); color:var(--muted); font-size:13.5px;}
.foot-in{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

.card.has-thumb{padding:0; overflow:hidden;}
.card.has-thumb .ct{display:block; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line);}
.card.has-thumb .ct img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.card.has-thumb:hover .ct img{transform:scale(1.045);}
.card.has-thumb .cbody{padding:13px 15px 15px;}

.toc{margin:22px 0; padding:15px 18px; border:1px solid var(--line); border-radius:12px; background:#f6f8fc;}
.toc b{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px;}
.toc a{display:inline-block; margin:3px 16px 3px 0; font-size:14px; color:var(--brand); text-decoration:none;}
.toc a:hover{text-decoration:underline;}