@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');
:root { --bg:#f5f4f1; --paper:#fff; --ink:#2b2a28; --muted:#625f59; --orange:var(--op-action-depth); --line:#e5dfd5; --soft:#fbf0e6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.85 'Heebo',Arial,sans-serif; }
a { color:var(--op-link); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--orange); outline-offset:5px; }
.skip-link { position:absolute; top:-100px; right:20px; background:#fff; padding:12px; z-index:100; }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(245,244,241,.97); border-bottom:1px solid var(--line); }
.header-inner { max-width:1080px; margin:auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:23px; font-weight:900; text-decoration:none; }
.brand-mark { display:grid; place-items:center; background:var(--op-action-fill); color:var(--op-action-ink); border-radius:11px; width:39px; height:39px; font-size:27px; line-height:1; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:11px 21px; min-height:46px; border:1px solid var(--orange); border-radius:11px; background:var(--op-action-fill); color:var(--op-action-ink); font:700 15px/1.5 'Heebo',Arial,sans-serif; text-decoration:none; cursor:pointer; }
.button.secondary { background:transparent; color:var(--op-link); }
.container { max-width:1080px; margin:auto; padding:0 24px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; padding:24px 0 12px; color:var(--muted); font-size:14px; }
.article-header { max-width:790px; padding:25px 0 34px; }
.eyebrow { font-size:14px; font-weight:800; color:var(--op-link); margin:0 0 10px; }
h1 { font-size:clamp(31px,5vw,48px); line-height:1.23; letter-spacing:-1px; margin:0 0 20px; }
.intro { font-size:20px; line-height:1.75; color:var(--muted); margin:0 0 18px; }
.byline { font-size:14px; color:var(--muted); }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 235px; gap:32px; align-items:start; padding-bottom:56px; }
article { min-width:0; border:1px solid var(--line); border-radius:20px; padding:36px; background:var(--paper); }
article h2 { font-size:26px; line-height:1.35; margin:36px 0 14px; }
article h2:first-child { margin-top:0; }
article h3 { font-size:20px; line-height:1.45; margin:24px 0 10px; }
article p { margin:0 0 16px; }
article ul,article ol { padding-inline-start:24px; }
article li { margin-bottom:8px; }
.toc { position:sticky; top:98px; border-right:2px solid var(--line); padding-right:18px; font-size:15px; }
.toc strong { display:block; margin-bottom:12px; }
.toc a { display:block; padding:7px 0; color:var(--muted); text-decoration:none; }
.toc a:hover { color:var(--op-link); }
.note { background:var(--soft); border-right:4px solid var(--op-frame); border-radius:8px; padding:18px 20px; margin:22px 0; }
.note p:last-child { margin-bottom:0; }
.example { border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:22px 0; }
.example-head { background:var(--bg); padding:20px; }
.example-head h3 { margin:0 0 8px; }
.example-head p { margin:4px 0; font-size:14px; }
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; min-width:530px; font-size:14px; }
caption { text-align:right; padding:14px 18px; color:var(--muted); }
th,td { padding:13px 14px; text-align:right; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#faf9f7; font-weight:800; }
tbody th { background:transparent; font-weight:500; }
td:nth-child(n+2) { white-space:nowrap; }
.example-foot { padding:18px 20px; font-size:14px; background:#faf9f7; }
.example-foot p { margin:4px 0; }
.checklist { list-style:none; padding:0; margin:14px 0 24px; }
article .checklist { padding:0; }
.checklist li { padding:12px 0; border-bottom:1px solid var(--line); margin:0; }
.checklist label { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.checklist input { accent-color:var(--orange); width:21px; height:21px; flex:0 0 21px; margin-top:6px; }
.checklist input:checked + span { color:var(--muted); }
.article-cta { background:var(--soft); padding:26px; border-radius:15px; margin:32px 0 12px; }
.article-cta h2 { margin:0 0 12px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.read-more { padding-top:24px; border-top:1px solid var(--line); margin-top:28px; }
.site-footer { padding:28px 24px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:14px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px; margin-top:10px; }
@media(max-width:800px) { .layout { grid-template-columns:minmax(0,1fr); gap:20px; } .toc { position:static; grid-row:1; padding:18px 22px; border:1px solid var(--line); border-radius:14px; background:#fff; } .toc a { display:inline-block; margin-left:18px; } }
@media(max-width:480px) { .container { padding:0 16px; } .header-inner { padding:12px 16px; } .header-inner .button { padding:10px 12px; font-size:14px; } article { padding:24px 19px; border-radius:16px; } .intro { font-size:18px; } article h2 { font-size:24px; } .article-cta { padding:22px 18px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { body { background:#fff; font-size:12pt; } .site-header,.breadcrumb,.toc,.site-footer,.actions,.article-cta,.read-more,.skip-link { display:none; } .container { max-width:none; padding:0; } .article-header { padding:0 0 15px; } h1 { font-size:25pt; } .layout { display:block; padding:0; } article { border:0; padding:0; } article h2 { break-after:avoid; } .checklist li,tr { break-inside:avoid; } .table-scroll { overflow:visible; } table { min-width:0; font-size:10pt; } a { color:inherit; } }