:root{--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--serif:'Fraunces',Georgia,'Times New Roman',serif}
.preview-bar{padding-top:16px}
.preview-bar .notice{margin:0}

.a-hero{background:var(--navy);color:#fff;padding:32px 0 56px}
.a-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
.a-back{display:inline-block;margin-bottom:30px;color:var(--ink-soft);text-decoration:none;font-size:15px}
.a-back:hover{color:#fff}
.a-kicker{margin:0 0 14px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.a-kicker a{color:var(--amber);text-decoration:none}
.a-kicker a:hover{color:#fff}
.a-pills{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.a-pills li{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:9px 18px}
.a-hero h1{font-family:var(--serif);color:#fff;font-size:clamp(34px,5.6vw,60px);line-height:1.04;letter-spacing:-.025em;font-weight:800;margin:0 0 22px;text-wrap:balance}
.a-lead{font-size:clamp(17px,2vw,21px);line-height:1.6;color:var(--ink-soft);margin:0 0 28px;max-width:620px;text-wrap:pretty}
.a-meta{font-family:var(--mono);font-size:14px;line-height:1.7;color:#9FB0CC;margin:0}
.a-meta a{color:#fff;text-decoration:none}
.a-meta a:hover{text-decoration:underline}
.a-hero-img{margin:0}
.a-hero-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;background:#16294A}

.a-layout{padding-top:40px;padding-bottom:72px}
.a-layout.has-side{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.a-main{min-width:0;width:100%;max-width:740px;margin-inline:auto}
.a-side{display:none}

.toc-mobile{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 28px}
.toc-mobile summary{font-family:var(--font-head);font-weight:700;cursor:pointer}
.toc-mobile ol{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.toc-mobile .lvl-3{padding-left:16px;font-size:14px}
.toc-mobile a{color:var(--blue)}

.side-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.side-title{font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:-.01em;margin:0 0 12px;color:var(--navy)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:14px;max-height:50vh;overflow:auto}
.toc a{display:block;padding:6px 10px;border-left:2px solid var(--line);color:var(--slate);text-decoration:none;line-height:1.4}
.toc a:hover{color:var(--navy);border-left-color:var(--blue)}
.toc a.is-active{color:var(--blue);border-left-color:var(--blue);font-weight:600}
.toc .lvl-3 a{padding-left:22px;font-size:13px}
.side-earn{border-left:4px solid var(--amber)}
.side-earn .side-title{margin-top:10px}
.side-earn p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--slate)}
.side-earn .btn{display:block;text-align:center}

@media (min-width:900px){.a-hero{padding:40px 0 64px}.a-hero-grid.has-image{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px}}
@media (min-width:1100px){
  .a-layout.has-side{grid-template-columns:minmax(0,740px) 300px;justify-content:center;gap:48px}
  .a-layout.has-side .a-main{margin-inline:0}
  .a-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:92px;align-self:start}
  .toc-mobile{display:none}
}
@media (max-width:640px){.a-hero{padding:24px 0 40px}.a-back{margin-bottom:22px}.a-hero-img img{border-radius:18px}.a-layout{padding-top:28px}}