:root{--canvas:#F4F6FA;--surface:#FFFFFF;--ink:#121722;--ink-2:#4A5468;--line:#D8DEE8;--select:#2B59FF;--select-ink:#FFFFFF;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--canvas:#0E1116;--surface:#161B23;--ink:#E9EDF3;--ink-2:#9AA5B8;--line:#273041;--select:#7C98FF;--select-ink:#0B1020;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 1.0625rem/1.75 "Be Vietnam Pro",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin-inline:auto;padding-inline:max(18px,env(safe-area-inset-left,0px))}
.wide{max-width:1040px}
header{border-bottom:1px solid var(--line);background:var(--surface)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;font:800 1.1875rem/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.025em;text-decoration:none;color:var(--ink)}
.brand b{font-weight:800;color:var(--select)}
.mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,#2B59FF,#7046F0)}
.mark svg{width:19px;height:19px}
.nav a{margin-left:18px;color:var(--ink-2);font-weight:600;font-size:.9375rem;text-decoration:none}
.nav a:hover{color:var(--select)}
h1,h2,h3{font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
main{padding:44px 0 72px}
.crumbs{font-size:.875rem;color:var(--ink-2);margin-bottom:14px}
.crumbs a{color:var(--ink-2)}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--hue) 14%,transparent);color:var(--hue);font-size:.8125rem;font-weight:700}
article h1{margin:12px 0 12px;font-size:clamp(2rem,5vw,2.75rem);font-weight:800}
.meta{color:var(--ink-2);font-size:.9375rem;margin:0 0 28px}
.lead{font-size:1.1875rem;color:var(--ink-2)}
article h2{margin:36px 0 10px;font-size:1.5rem}
article a{color:var(--select)}
article li{margin:8px 0}
.cta{margin:44px 0 0;padding:24px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.cta h2{margin:0 0 6px;font-size:1.25rem}
.cta p{margin:0 0 16px;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;margin:0 8px 8px 0;border-radius:10px;background:var(--select);color:var(--select-ink);font-weight:700;text-decoration:none}
.btn.ghost{background:transparent;color:var(--select);border:1.5px solid var(--select)}
.more h2{margin:48px 0 14px;font-size:1.25rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--hue);text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.card h3{margin:4px 0 0;font-size:1.1875rem}
.card p{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.6;flex:1}
.card span.r{font-size:.8125rem;color:var(--ink-2)}
.page-head h1{margin:0 0 8px;font-size:clamp(2rem,5vw,2.75rem);font-weight:800}
.page-head p{margin:0 0 30px;color:var(--ink-2)}
footer{padding:28px 0;border-top:1px solid var(--line);color:var(--ink-2);font-size:.9375rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
footer a{color:var(--ink-2)}
:focus-visible{outline:2px solid var(--select);outline-offset:3px}
@media (max-width:560px){.nav a:first-child{display:none}}