:root{
  --bg: #ffffff;
  --ink: #12212f;
  --ink-muted:#455564;
  --brand:#0f6abf;
  --brand-2:#12a39a;
  --surface:#f4f7fb;
  --focus:#ffb400;
  --radius: 14px;
  --maxw: 980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{ margin:0; font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); }
a{color:var(--brand); text-decoration-thickness:.08em; text-underline-offset:.15em;}
a:hover{color:#0a4d8a}
img{max-width:100%; height:auto; border-radius: 10px;}
.visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;}
.container{max-width:var(--maxw); margin-inline:auto; padding: 20px;}
header.site-header{background:linear-gradient(180deg,#e9f2fb,#ffffff); border-bottom:1px solid #e6eef7}
.site-title{margin:0; padding:18px 20px; font-size:clamp(22px,2.4vw,28px);}
.navbar{display:flex; gap:10px; flex-wrap:wrap; padding:0 20px 18px 20px;}
.navbar a{ padding:10px 14px; border-radius:999px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid #e1e7ee; }
.navbar a[aria-current="page"]{background:var(--brand); color:white; border-color:var(--brand);}
.navbar a:focus,.navbar a:hover{outline:2px solid var(--focus); outline-offset:2px}
main{padding:24px 0;}
.hero{ background:linear-gradient(135deg,#f7fbff 0%,#f2fff8 100%); border:1px solid #e6eef7; border-radius:var(--radius); padding:24px; margin-bottom:24px; }
.hero h1{margin-top:0; font-size:clamp(24px,3vw,36px);}
.card{ background:var(--surface); border:1px solid #e6eef7; border-radius:var(--radius); padding:18px; }
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:760px){ .grid-2{grid-template-columns:1fr;} }
blockquote.tip{ margin:0; padding:14px 16px; border-left:4px solid var(--brand-2); background:#f1fbfa; border-radius:8px; }
footer.site-footer{ border-top:1px solid #e6eef7; padding:18px 0; color:var(--ink-muted); }
button,.btn{ display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid #d9e5f3; background:white; color:var(--ink); }
.btn-primary{background:var(--brand); color:white; border-color:var(--brand)}
.btn-primary:hover{filter:brightness(.9)}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:10px; top:10px; width:auto; height:auto; background:#000; color:#fff; padding:10px 14px; border-radius:10px}
.embed-responsive{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; border:1px solid #e6eef7; background:#000}
.embed-responsive video,.embed-responsive iframe,.embed-responsive audio{ position:absolute; top:0; left:0; width:100%; height:100%; }
.table-like{border:1px solid #e6eef7; border-radius:10px; overflow:hidden}
.table-like header,.table-like section{display:grid; grid-template-columns:2fr 1fr; gap:0}
.table-like header{background:#f4f7fb; font-weight:600}
.table-like header div,.table-like section div{padding:12px 14px; border-bottom:1px solid #e6eef7}