@font-face{font-family:"Literata";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/literata-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/literata-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-ext-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:italic;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--primary:#1f5d5a;--primary-hover:#174845;--on-primary:#fbf9f4;--primary-tint:#e2eeeb;--canvas:#f8f5ef;--surface:#f0ebe1;--surface-strong:#ebe4d6;--diagram-canvas:#fdfbf7;--code-bg:#f1ede4;--code-text:#1d1b18;--hairline:#ddd5c6;--hairline-strong:#857c6f;--ink:#1d1b18;--body:#3a3631;--muted:#655e54;--success:#2e6b45;--warning:#8a5a0c;--warning-tint:#f5ead0;--error:#a63d2a;--error-tint:#f6e3df;--diagram-line:#5b554c;--diagram-node:#fffdf8;--overlay:#f8f5ef;--overlay-border:transparent;--shadow:0 12px 32px -8px rgba(29,27,24,.18);--scrim:rgba(29,27,24,.32);--d-business:#f6ecc8;--d-business-s:#9c8130;--d-application:#dbe9ee;--d-application-s:#4f8291;--d-technology:#dfe9d6;--d-technology-s:#5e8450;--d-motivation:#e6e2f1;--d-motivation-s:#7468a3;--d-strategy:#f4e3cf;--d-strategy-s:#a8723f;--d-implementation:#f2dfdd;--d-implementation-s:#a06262;color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--primary:#7cc2b7;--primary-hover:#9ad3ca;--on-primary:#0f1f1d;--primary-tint:#1d3432;--canvas:#181715;--surface:#211f1c;--surface-strong:#2a2824;--diagram-canvas:#211f1c;--code-bg:#211f1c;--code-text:#e6e0d6;--hairline:#3b3833;--hairline-strong:#6f685e;--ink:#f1ece3;--body:#d5cfc4;--muted:#a39b8f;--success:#7fc193;--warning:#e3b25a;--warning-tint:#3a2f17;--error:#ee8f7c;--error-tint:#3b2420;--diagram-line:#a8a196;--diagram-node:#22201d;--overlay:#2a2824;--overlay-border:#3b3833;--shadow:none;--scrim:rgba(0,0,0,.55);--d-business:#3a3322;--d-business-s:#c9ad57;--d-application:#1f343a;--d-application-s:#79aebc;--d-technology:#26331f;--d-technology-s:#8fb47a;--d-motivation:#2d2a3b;--d-motivation-s:#a49bd0;--d-strategy:#3a2d20;--d-strategy-s:#d09b66;--d-implementation:#3a2627;--d-implementation-s:#cc8f8f;color-scheme:dark}}
:root[data-theme="dark"]{--primary:#7cc2b7;--primary-hover:#9ad3ca;--on-primary:#0f1f1d;--primary-tint:#1d3432;--canvas:#181715;--surface:#211f1c;--surface-strong:#2a2824;--diagram-canvas:#211f1c;--code-bg:#211f1c;--code-text:#e6e0d6;--hairline:#3b3833;--hairline-strong:#6f685e;--ink:#f1ece3;--body:#d5cfc4;--muted:#a39b8f;--success:#7fc193;--warning:#e3b25a;--warning-tint:#3a2f17;--error:#ee8f7c;--error-tint:#3b2420;--diagram-line:#a8a196;--diagram-node:#22201d;--overlay:#2a2824;--overlay-border:#3b3833;--shadow:none;--scrim:rgba(0,0,0,.55);--d-business:#3a3322;--d-business-s:#c9ad57;--d-application:#1f343a;--d-application-s:#79aebc;--d-technology:#26331f;--d-technology-s:#8fb47a;--d-motivation:#2d2a3b;--d-motivation-s:#a49bd0;--d-strategy:#3a2d20;--d-strategy-s:#d09b66;--d-implementation:#3a2627;--d-implementation-s:#cc8f8f;color-scheme:dark}
@media not all and (prefers-color-scheme: dark){:root:not([data-theme="dark"]) .fig-dark{display:none!important}}
@media (prefers-color-scheme: dark){:root[data-theme="light"] .fig-dark{display:none!important}:root:not([data-theme="light"]) .fig-light{display:none!important}}
:root[data-theme="dark"] .fig-light{display:none!important}
/* Business Analysis Notes — site styles. Tokens and fonts are generated by build.py. */
:root{
  --font-serif:"Literata",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --measure:680px; --wide:1040px; --container:1200px; --toc:240px;
  --gutter:32px; --header-h:64px;
  --r-xs:3px; --r-sm:6px; --r-md:8px; --r-lg:12px;
  --ease:150ms ease-out;
}
@media (max-width:639px){:root{--gutter:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--canvas);color:var(--body);font:400 18px/1.65 var(--font-sans);
  font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color var(--ease),text-decoration-thickness var(--ease)}
a:hover{color:var(--primary-hover);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:2px}
button{font:inherit;color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--primary);color:var(--on-primary);
  padding:10px 16px;border-radius:var(--r-md);font:500 15px/1.2 var(--font-sans);text-decoration:none}
.skip-link:focus{top:12px}
main{display:block;outline:none}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.icon{flex:none;display:block}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--canvas);border-bottom:1px solid var(--hairline)}
.header-inner{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand{font:500 20px/1.2 var(--font-serif);color:var(--ink);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.brand:hover{color:var(--ink)}
.main-nav{margin-left:auto}
.main-nav>ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.main-nav a,.main-nav summary{display:flex;align-items:center;gap:4px;height:44px;padding:0 12px;
  font:500 15px/1.2 var(--font-sans);color:var(--ink);text-decoration:none;cursor:pointer;border-radius:var(--r-md)}
.main-nav summary{list-style:none}
.main-nav summary::-webkit-details-marker{display:none}
.main-nav a:hover,.main-nav summary:hover{color:var(--primary)}
.main-nav a[aria-current="page"],.nav-topics.is-current summary{color:var(--primary);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:6px}
.nav-topics{position:relative}
.nav-topics details[open] summary .icon{transform:rotate(180deg)}
.menu-panel{position:absolute;top:calc(100% + 8px);left:-8px;width:300px;padding:8px;background:var(--overlay);
  border:1px solid var(--overlay-border);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list a{display:flex;justify-content:space-between;align-items:baseline;height:auto;padding:10px 12px;font-weight:500}
.menu-list a:hover{background:var(--surface);color:var(--ink)}
.count{font:600 12px/1.3 var(--font-sans);letter-spacing:.06em;color:var(--muted);font-feature-settings:"tnum"}
.header-actions{display:flex;align-items:center;gap:4px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;
  background:transparent;color:var(--ink);border-radius:var(--r-md);cursor:pointer;transition:background var(--ease),color var(--ease)}
.icon-btn:hover{background:var(--surface)}
.theme-toggle .ti{display:none}
.theme-toggle[data-mode="system"] .ti-system,.theme-toggle[data-mode="light"] .ti-light,
.theme-toggle[data-mode="dark"] .ti-dark,.theme-toggle:not([data-mode]) .ti-system{display:inline-flex}
.menu-btn{display:none}
.menu-btn .mi-close,.menu-btn[aria-expanded="true"] .mi-open{display:none}
.menu-btn[aria-expanded="true"] .mi-close{display:inline-flex}
.mobile-menu{position:fixed;inset:var(--header-h) 0 0 0;z-index:39;background:var(--canvas);overflow-y:auto;padding:24px 0 48px}
.mobile-menu[hidden]{display:none}
.mobile-list{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid var(--hairline)}
.mobile-list a{display:flex;justify-content:space-between;align-items:baseline;min-height:52px;padding:8px 0;
  border-bottom:1px solid var(--hairline);color:var(--ink);text-decoration:none;font:500 17px/1.3 var(--font-sans)}
@media (max-width:639px){
  .header-inner{gap:4px}
  .brand{font-size:17px;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:1023px){
  .main-nav{display:none}
  .menu-btn{display:inline-flex}
  .header-actions{margin-left:auto}
}

/* ---------- shared text bits ---------- */
.eyebrow{margin:0 0 12px;font:600 12px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.eyebrow a{color:var(--muted);text-decoration:none}
.eyebrow a:hover{color:var(--primary);text-decoration:underline}
.chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:9999px;background:var(--surface);
  color:var(--muted);font:600 12px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;border:0}
.chip-ref{margin-left:8px;font-feature-settings:"tnum";vertical-align:1px}
.display{margin:0;font:500 52px/1.1 var(--font-serif);letter-spacing:-.02em;color:var(--ink)}
.lead{font:400 21px/1.55 var(--font-serif);color:var(--body);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:12px 20px;border-radius:var(--r-md);
  font:500 15px/1.2 var(--font-sans);text-decoration:none;cursor:pointer;transition:background var(--ease),color var(--ease)}
.btn-primary{background:var(--primary);color:var(--on-primary);border:1px solid var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary)}
.btn-secondary{background:var(--canvas);color:var(--ink);border:1px solid var(--hairline-strong)}
.btn-secondary:hover{background:var(--surface);color:var(--ink)}

/* ---------- article layout ---------- */
.article-layout{padding-top:48px;padding-bottom:96px}
.article>*{max-width:var(--measure);margin-left:auto;margin-right:auto}
.article>.prose{max-width:var(--wide)}
.toc-side{display:none}
@media (min-width:1200px){
  .article-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--toc);gap:48px;align-items:start}
  .toc-side{display:block;position:sticky;top:calc(var(--header-h) + 32px);max-height:calc(100vh - var(--header-h) - 64px);overflow-y:auto;padding-bottom:16px}
  .toc-mobile{display:none}
  .article-layout.no-side-toc{display:block}
  .no-side-toc .toc-side{display:none}
  .no-side-toc .toc-mobile{display:block}
}
.article-head h1{margin:0;font:500 40px/1.15 var(--font-serif);letter-spacing:-.015em;color:var(--ink)}
.article-head .eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.article-meta{margin:16px 0 0;font:400 14px/1.5 var(--font-sans);color:var(--muted);font-feature-settings:"tnum"}
.article-head .lead{margin-top:24px}
.lead-label{display:block;margin-bottom:6px;font:600 12px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.based-on{display:flex;gap:10px;margin:20px 0 0;padding:14px 16px;border-radius:var(--r-lg);background:var(--surface);
  font:400 14px/1.5 var(--font-sans);color:var(--muted)}
.based-on .icon{margin-top:1px;color:var(--muted)}
.based-on em{font-style:italic}
.based-label{font-weight:600;color:var(--ink)}
.toc-title{margin:0 0 8px;font:600 12px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.toc-list,.toc-list ul{list-style:none;margin:0;padding:0}
.toc-list ul{padding-left:12px}
.toc-list a{display:block;padding:6px 10px;border-left:2px solid transparent;border-radius:0 var(--r-sm) var(--r-sm) 0;
  font:400 14px/1.5 var(--font-sans);color:var(--muted);text-decoration:none}
.toc-list a:hover{color:var(--ink)}
.toc-list a.active{background:var(--primary-tint);color:var(--ink);border-left-color:var(--primary)}
.toc-mobile{margin-top:32px;border:1px solid var(--hairline);border-radius:var(--r-lg)}
.toc-mobile summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;cursor:pointer;
  font:500 15px/1.2 var(--font-sans);color:var(--ink);list-style:none}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile[open] summary .icon{transform:rotate(180deg)}
.toc-mobile nav{padding:0 8px 12px}

/* ---------- prose ---------- */
.prose{margin-top:8px}
.prose>*,.prose>.sec>*{max-width:var(--measure);margin-left:auto;margin-right:auto}
.prose>.sec{max-width:none}
.prose p{margin-top:0;margin-bottom:24px}
.prose h2{margin:64px auto 16px;font:500 30px/1.25 var(--font-serif);letter-spacing:-.01em;color:var(--ink)}
.prose h3{margin:40px auto 12px;font:600 23px/1.3 var(--font-serif);letter-spacing:-.005em;color:var(--ink)}
.prose h4{margin:32px auto 8px;font:600 18px/1.4 var(--font-sans);color:var(--ink)}
.prose h2+h3{margin-top:24px}
.anchor{margin-left:8px;color:var(--hairline-strong);text-decoration:none;opacity:0;font-family:var(--font-sans);font-weight:400}
h2:hover .anchor,h3:hover .anchor,.anchor:focus{opacity:1}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 auto 24px;padding-left:1.4em}
.prose li{margin:0 0 8px}
.prose li>ul,.prose li>ol{margin:8px 0 0}
.prose li::marker{color:var(--muted)}
.prose ol>li::marker{font-feature-settings:"tnum";font-weight:500}
.prose code{font:500 13px/1.4 var(--font-mono);background:var(--code-bg);color:var(--code-text);padding:1px 5px;border-radius:var(--r-xs)}
.prose hr{border:0;border-top:1px solid var(--hairline);margin:48px auto}
.quote{margin:40px auto;padding:20px 24px;border-left:3px solid var(--hairline-strong);border-radius:0 var(--r-lg) var(--r-lg) 0;
  background:var(--surface);color:var(--ink)}
.quote p{margin:0;font:400 21px/1.55 var(--font-serif)}
.quote p+p{margin-top:12px}

/* sections with their own look */
.sec-common-mistakes ul,.sec-pitfalls ul{list-style:none;padding:0}
.sec-common-mistakes li,.sec-pitfalls li{position:relative;padding:14px 16px 14px 48px;margin:0 0 8px;border-radius:var(--r-lg);background:var(--error-tint)}
.sec-common-mistakes li::before,.sec-pitfalls li::before{content:"";position:absolute;left:16px;top:17px;width:20px;height:20px;
  background:var(--error);-webkit-mask:var(--icon-pitfall) center/contain no-repeat;mask:var(--icon-pitfall) center/contain no-repeat}
:root{--icon-pitfall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
  --icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.sec-related ul{list-style:none;padding:0;border-top:1px solid var(--hairline)}
.sec-related li{margin:0;padding:12px 0 12px 32px;border-bottom:1px solid var(--hairline);position:relative;font-size:16px;line-height:1.6}
.sec-related li::before{content:"";position:absolute;left:4px;top:16px;width:18px;height:18px;background:var(--primary);
  -webkit-mask:var(--icon-arrow) center/contain no-repeat;mask:var(--icon-arrow) center/contain no-repeat}
.sec-related li a{font-weight:500}
.sec-sources-and-further-reading,.sec-sources,.hub-sources{font-size:16px;line-height:1.6}
.sec-sources-and-further-reading li,.sec-sources li,.hub-sources li{color:var(--body);margin-bottom:10px}
.sec-sources-and-further-reading h2,.sec-sources h2,.hub-sources h2{font-size:23px;font-weight:600}

/* checklist */
.checklist{list-style:none;padding:0!important}
.checklist li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:10px 0;border-bottom:1px solid var(--hairline)}
.checklist li:first-child{border-top:1px solid var(--hairline)}
.checklist input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:4px 0 0;border:1.5px solid var(--hairline-strong);
  border-radius:var(--r-sm);background:var(--diagram-node);cursor:pointer;display:grid;place-content:center}
.checklist input:checked{background:var(--primary);border-color:var(--primary)}
.checklist input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--on-primary);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.checklist li:has(input:checked){color:var(--muted)}

/* tables */
.table-wrap{margin:40px auto;overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-lg)}
.table-wrap.wide{max-width:var(--wide)!important}
.prose table{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--font-sans);font-feature-settings:"tnum";color:var(--body)}
.prose th{background:var(--surface-strong);color:var(--ink);font:500 15px/1.2 var(--font-sans);text-align:left;padding:10px 12px;vertical-align:bottom}
.prose td{padding:10px 12px;border-top:1px solid var(--hairline);vertical-align:top}
.prose tbody tr{transition:background var(--ease)}
.prose tbody tr:hover{background:var(--surface)}
.prose td strong{color:var(--ink)}
.req-id{font:500 13px/1.4 var(--font-mono)!important;padding:2px 6px!important;white-space:nowrap}
.badge{display:inline-block;padding:3px 10px;border-radius:9999px;font:600 12px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.badge-must{background:var(--primary-tint);color:var(--primary)}
.badge-other{background:var(--surface);color:var(--muted)}
@media (max-width:639px){
  .prose th:first-child,.prose td:first-child{position:sticky;left:0;z-index:1;background:var(--canvas);box-shadow:1px 0 0 var(--hairline)}
  .prose th:first-child{background:var(--surface-strong)}
  .prose td,.prose th{min-width:120px}
}

/* code blocks */
.code-block{margin:40px auto;border-radius:var(--r-lg);background:var(--code-bg);overflow:hidden}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 0 20px}
.code-lang{font:600 12px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.copy-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:var(--r-md);background:transparent;
  color:var(--muted);font:500 13px/1 var(--font-sans);cursor:pointer}
.copy-btn:hover{background:var(--surface-strong);color:var(--ink)}
.code-block pre{margin:0;padding:8px 20px 16px;overflow-x:auto;white-space:pre}
.code-block code{display:block;padding:0;background:none;font:400 15px/1.6 var(--font-mono);color:var(--code-text);width:max-content;min-width:100%}

/* callouts */
.callout{margin:40px auto;padding:20px 24px;border-radius:var(--r-lg);border-left:3px solid var(--primary);background:var(--primary-tint);color:var(--body);max-width:var(--measure)}
.callout-title{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:600 18px/1.4 var(--font-sans);color:var(--ink)}
.callout-title .icon{color:var(--primary)}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout .prose,.callout p{max-width:none}
.callout-warning{background:var(--warning-tint);border-left-color:var(--warning)}
.callout-warning .callout-title .icon{color:var(--warning)}

/* figures */
.figure{margin:40px auto;max-width:var(--measure)}
.figure.wide{max-width:var(--wide)!important}
.plate{position:relative;background:var(--diagram-canvas);border:1px solid var(--hairline);border-radius:var(--r-lg)}
.plate-scroll{overflow-x:auto;padding:24px;border-radius:var(--r-lg)}
.figure.wide .plate-scroll{padding:16px}
.plate-scroll svg{display:block;margin:0 auto;max-width:none;height:auto;background:transparent!important}
.plate-tools{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:4px;padding:4px;border-radius:var(--r-md);
  background:var(--diagram-canvas);border:1px solid var(--hairline);opacity:0;transition:opacity var(--ease)}
.plate:hover .plate-tools,.plate:focus-within .plate-tools{opacity:1}
@media (hover:none){.plate-tools{opacity:1}}
.tool{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.tool:hover{background:var(--surface);color:var(--ink)}
@media (hover:none){.tool{width:44px;height:44px}}
.fig-hint{display:none;align-items:center;gap:8px;min-height:44px;margin-top:4px;padding:0;border:0;background:none;
  color:var(--primary);font:500 14px/1.3 var(--font-sans);cursor:pointer;text-align:left}
@media (max-width:639px){.fig-hint{display:inline-flex}}
.figure figcaption{margin-top:12px;font:400 14px/1.5 var(--font-sans);color:var(--muted)}
.fig-num{font:600 15px/1.4 var(--font-serif);color:var(--ink);margin-right:4px}
.fig-notation{display:block;margin-top:2px;font-size:13px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:12px 0 0;padding:0;font:400 12px/1.3 var(--font-sans);color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px;margin:0}
.swatch{width:16px;height:12px;border-radius:3px;border:1.5px solid}
.fig-text{margin-top:8px}
.fig-text summary{display:inline-flex;align-items:center;min-height:36px;font:500 14px/1.2 var(--font-sans);color:var(--primary);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.fig-text pre{margin:8px 0 0;padding:16px 20px;border-radius:var(--r-lg);background:var(--code-bg);color:var(--code-text);
  font:400 14px/1.6 var(--font-mono);overflow-x:auto;white-space:pre}

/* article footer */
.article-foot{margin-top:64px}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:24px;border-top:1px solid var(--hairline)}
.tags-label{font:400 14px/1.5 var(--font-sans);color:var(--muted);margin-right:4px}
.chip-tag{cursor:pointer;min-height:28px}
.chip-tag:hover{background:var(--surface-strong);color:var(--ink)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.pager-link{display:flex;flex-direction:column;gap:6px;padding:16px 20px;border:1px solid var(--hairline);border-radius:var(--r-lg);
  text-decoration:none;color:var(--body);transition:background var(--ease)}
.pager-link:hover{background:var(--surface);color:var(--body)}
.pager-link.next{text-align:right;align-items:flex-end;grid-column:2}
.pager-dir{display:inline-flex;align-items:center;gap:6px;font:600 12px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pager-title{font:600 16px/1.4 var(--font-sans);color:var(--primary)}
@media (max-width:639px){.pager{grid-template-columns:1fr}.pager-link.next{grid-column:1}}

/* ---------- cards, hubs, home ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:1023px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.card-grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:var(--canvas);color:var(--body);text-decoration:none;transition:background var(--ease)}
.card:hover{background:var(--surface);color:var(--body)}
.card:hover .chip{background:var(--surface-strong)}
.card-title{margin:2px 0 0;font:600 18px/1.4 var(--font-sans);letter-spacing:-.005em;color:var(--ink)}
.card:hover .card-title{color:var(--primary)}
.card-excerpt{margin:0;font:400 16px/1.6 var(--font-sans);color:var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin:auto 0 0;padding-top:4px;font:400 14px/1.5 var(--font-sans);color:var(--muted)}
.hub{padding-top:64px;padding-bottom:96px}
.hub-head{max-width:820px;margin-bottom:48px}
.hub-head .lead{margin-top:20px}
.hub-intro{margin:0 0 32px}
.hub-intro>*,.hub-intro>.sec>*{margin-left:0!important}
.hub-intro:empty{display:none}
.hub .hub-sources{margin-top:64px;padding-top:8px;border-top:1px solid var(--hairline)}
.hub .hub-sources h2{margin-top:32px}
.hub .card-grid+.hub-sources{max-width:var(--measure)}
.home{padding-bottom:96px}
.home-hero{padding:80px 0 0;max-width:820px}
.home-hero .lead{margin-top:24px}
.home-more p{margin:16px 0 0;max-width:var(--measure)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.home-block{margin-top:96px}
.home-h2{margin:0 0 24px;font:500 30px/1.25 var(--font-serif);letter-spacing:-.01em;color:var(--ink)}
.home .prose{margin:0}
.home .prose>*{margin-left:0}
.home .callout{margin:0;max-width:820px}
.home .callout .callout-title{font:500 23px/1.3 var(--font-serif);letter-spacing:-.005em}
.steps ol{counter-reset:step;list-style:none;padding:0}
.steps ol>li{counter-increment:step;position:relative;padding:0 0 20px 56px;margin:0}
.steps ol>li::before{content:counter(step);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  display:grid;place-content:center;background:var(--primary-tint);color:var(--primary);font:600 16px/1 var(--font-sans);font-feature-settings:"tnum"}
.notfound{padding:96px var(--gutter) 96px}
.notfound .lead{margin-top:20px;max-width:var(--measure)}
.notfound .home-h2{margin-top:64px}
.topic-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;max-width:820px}
.topic-links a{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hairline);text-decoration:none;font-weight:500}
@media (max-width:639px){.topic-links{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{background:var(--surface);color:var(--muted);font:400 14px/1.5 var(--font-sans);padding:64px 0 48px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-brand p{margin:12px 0 0;max-width:300px}
.footer-col h2{margin:0 0 12px;font:600 12px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 8px}
.footer-col a{color:var(--muted);text-decoration:none}
.footer-col a:hover{color:var(--primary);text-decoration:underline}
.footer-note{margin-top:48px}
.footer-note p{margin:0;padding-top:24px;border-top:1px solid var(--hairline);max-width:none}
@media (max-width:1023px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (max-width:639px){.footer-grid{grid-template-columns:1fr}}

/* ---------- dialogs ---------- */
dialog{color:var(--body)}
dialog::backdrop{background:var(--scrim)}
.search-dialog{width:min(640px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 96px));margin:72px auto auto;padding:0;
  border:1px solid var(--overlay-border);border-radius:var(--r-lg);background:var(--overlay);box-shadow:var(--shadow);overflow:hidden}
.search-dialog[open]{display:flex;flex-direction:column}
.search-box{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--hairline)}
.search-field{flex:1;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--hairline-strong);border-radius:var(--r-md);
  background:var(--diagram-node);color:var(--muted)}
.search-field:focus-within{border-color:var(--primary);outline:2px solid var(--primary);outline-offset:2px}
.search-field input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:400 16px/1.6 var(--font-sans);outline:none}
.search-field input::-webkit-search-cancel-button{display:none}
.search-status{margin:0;padding:10px 20px 0;font:400 13px/1.5 var(--font-sans);color:var(--muted)}
.search-status:empty{display:none}
.search-results{list-style:none;margin:0;padding:8px;overflow-y:auto}
.search-results a{display:block;padding:10px 12px;border-radius:var(--r-md);text-decoration:none;color:var(--body)}
.search-results a:hover,.search-results a.sel{background:var(--surface)}
.sr-title{display:block;font:600 16px/1.4 var(--font-sans);color:var(--ink)}
.sr-sec{display:block;margin-top:2px;font:600 11px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sr-desc{display:block;margin-top:4px;font:400 14px/1.5 var(--font-sans);color:var(--muted)}
.search-results mark{background:var(--primary-tint);color:var(--ink);border-radius:2px}
.viewer{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--diagram-canvas)}
.viewer[open]{display:flex;flex-direction:column}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 20px;border-bottom:1px solid var(--hairline);background:var(--canvas)}
.viewer-title{margin:0;font:400 14px/1.5 var(--font-sans);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-actions{display:flex;gap:4px}
.viewer-stage{flex:1;overflow:hidden;position:relative;touch-action:none;cursor:grab}
.viewer-stage.dragging{cursor:grabbing}
.viewer-canvas{position:absolute;left:0;top:0;transform-origin:0 0}
.viewer-canvas svg{display:block;max-width:none;background:transparent!important}

/* ---------- responsive type ---------- */
@media (max-width:1023px){
  .display{font-size:44px}
  .article-head h1{font-size:34px}
}
@media (max-width:639px){
  body{font-size:17px}
  .display{font-size:36px}
  .article-head h1{font-size:30px}
  .prose h2,.home-h2{font-size:24px}
  .prose h3{font-size:20px}
  .lead,.quote p{font-size:19px}
  .article-layout{padding-top:32px}
  .home-hero{padding-top:48px}
  .home-block{margin-top:64px}
  .hub{padding-top:40px}
  .plate-scroll{padding:16px}
  .code-block pre{padding:8px 16px 16px}
  .callout{padding:16px 20px}
}
@media print{
  .site-header,.site-footer,.toc-side,.toc-mobile,.plate-tools,.pager,.tags,.copy-btn,dialog{display:none!important}
  body{background:#fff;color:#000}
}