:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#243b3b; background:#f4f5f0; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 20% 0%,#dfeeea,transparent 34%),#f4f5f0; }
main { width:min(860px,calc(100% - 40px)); margin:0 auto; padding:48px 0 64px; }
.brand { display:flex; align-items:center; gap:12px; margin:0 0 20px 4px; }
.brand>span:last-child { display:grid; gap:2px; }
.brand strong { color:#183b3b; font-size:15px; letter-spacing:.04em; }
.brand small { color:#657575; font-size:12px; }
.mark { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#183b3b; color:#fff; font-size:22px; font-weight:750; }
article { overflow:hidden; border-radius:14px; background:#fff; box-shadow:0 18px 48px rgb(25 54 54 / 12%); }
.intro { display:grid; gap:12px; padding:34px 38px 28px; background:linear-gradient(135deg,#fff,#eff7f4); }
.meta { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#287c73; }
.shield { display:grid; place-items:center; width:28px; height:28px; border:2px solid currentColor; border-radius:10px 10px 12px 12px; font-weight:800; }
.date { border-radius:999px; padding:4px 10px; background:#f3f4f1; color:#243b3b; font-size:12px; font-weight:650; }
h1 { margin:0; color:#183b3b; font-size:clamp(28px,5vw,44px); line-height:1.08; letter-spacing:-.035em; }
.intro p { max-width:660px; margin:0; color:#657575; font-size:16px; line-height:1.65; }
.content { display:grid; gap:28px; padding:34px 38px 40px; }
section { display:grid; gap:10px; }
h2 { margin:0; color:#183b3b; font-size:18px; line-height:1.3; }
p,ul { margin:0; color:#657575; font-size:14px; line-height:1.72; }
a { color:#236f68; text-underline-offset:3px; }
ul { display:grid; gap:8px; padding-left:20px; }
li::marker { color:#287c73; }
hr { width:100%; margin:0; border:0; border-top:1px solid #e2e8e5; }
footer { padding:18px 4px 0; color:#7d8989; font-size:12px; text-align:center; }
@media(max-width:600px) {
  main { width:calc(100% - 24px); padding:24px 0 40px; }
  .intro { padding:26px 22px 22px; }
  .content { gap:24px; padding:26px 22px 30px; }
  .meta { align-items:flex-start; flex-direction:column; }
  .intro p { font-size:15px; }
}