.framework-page { --framework-reading-width: 68ch; }
.framework-page .site-header { position: absolute; }
.framework-page h1, .framework-page h2, .framework-page h3 { text-wrap: balance; }
.framework-page p { text-wrap: pretty; }
.framework-document { overflow: clip; }
.framework-hero { padding-top: 164px; padding-bottom: 0; }
.framework-breadcrumb { display: flex; align-items: center; gap: 13px; color: #999; font-size: 13px; }
.framework-breadcrumb a:hover { color: var(--amber); }
.framework-breadcrumb > span[aria-hidden] { color: #56504a; }
.framework-breadcrumb > span:last-child { color: #d8c4ac; }
.framework-hero-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(220px, .8fr); gap: 55px; align-items: center; padding-block: 53px 65px; }
.framework-product-name { font-size: 18px; color: #d2b087; margin-bottom: 20px; }
.framework-page .framework-hero h1 { font-size: clamp(47px, 5.05vw, 74px); font-weight: 500; line-height: 1.06; letter-spacing: -.045em; max-width: 900px; margin: 0; }
.framework-hero-description { max-width: 670px; margin-top: 27px; font-size: 18px; line-height: 1.75; color: #aaa; }
.framework-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px 30px; margin-top: 32px; }
.framework-hero-actions .button { font-size: 14px; padding: 15px 20px; gap: 20px; }
.framework-source-link { display: inline-flex; align-items: center; gap: 14px; width: fit-content; color: #d1b18a; font-size: 14px; line-height: 1.5; }
.framework-source-link:hover { color: var(--amber); }
.framework-source-link > span { flex-shrink: 0; }
.framework-signal { position: relative; height: 290px; width: 100%; max-width: 325px; justify-self: end; isolation: isolate; }
.framework-signal::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse, #bf7c1712, transparent 67%); z-index: -1; }
.framework-signal-rail { position: absolute; border: 1px solid #78614844; border-radius: 38px; width: 154px; height: 198px; transform: rotate(-24deg); }
.framework-signal-rail::after { content: ''; position: absolute; width: 7px; height: 7px; background: #d89f55; border: 2px solid #382818; border-radius: 50%; box-shadow: 0 0 15px #ff9e3233; }
.framework-signal .rail-one { top: 11px; left: 12%; border-color: #8e643653; }
.framework-signal .rail-one::after { top: 31px; left: -4px; }
.framework-signal .rail-two { top: 25px; left: 29%; border-color: #8f653a78; }
.framework-signal .rail-two::after { bottom: 31px; right: -4px; }
.framework-signal .rail-three { top: 39px; left: 46%; border-color: #654c3244; }
.framework-signal .rail-three::after { display: none; }
.framework-signal-symbol { display: grid; place-items: center; position: absolute; inset: 18px 5% 62px; font-size: clamp(74px, 7.1vw, 108px); font-weight: 500; letter-spacing: -.065em; color: #edc393; text-shadow: 0 8px 35px #000; }
.framework-page[data-framework="dotnet"] .framework-signal-symbol { font-size: 66px; letter-spacing: -.055em; }
.framework-signal-caption { position: absolute; bottom: 3px; width: 100%; text-align: center; font-size: 14px; color: #b5a18b; }
.framework-signal-caption > span { display: block; margin-top: 5px; color: #777; font-size: 11px; }
.framework-runtime { display: flex; gap: 35px; align-items: center; min-height: 96px; border-top: 1px solid #ffffff15; }
.framework-runtime > span { color: #8b8b8b; font-size: 13px; flex-shrink: 0; }
.framework-runtime ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 0; margin: 0; }
.framework-runtime li { padding: 5px 12px; border: 1px solid #584532; border-radius: 50px; color: #c8b8a3; font-size: 12px; background: #1e17100a; }
.framework-chapters { position: sticky; top: 0; z-index: 12; border-block: 1px solid #ffffff13; background: #111111f5; backdrop-filter: blur(12px); }
.framework-chapters > div { display: flex; gap: 35px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #5c4228 transparent; }
.framework-chapters a { display: block; padding-block: 19px 16px; white-space: nowrap; border-bottom: 2px solid transparent; font-size: 13px; color: #929292; }
.framework-chapters a:hover, .framework-chapters a[aria-current="location"] { color: #edb675; border-bottom-color: var(--amber); }
.framework-document section[id] { scroll-margin-top: 0; }
.framework-capabilities, .framework-walkthrough, .framework-connections { padding-block: 95px; }
.framework-section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 41px; }
.framework-page h2 { font-size: clamp(31px, 3.1vw, 45px); font-weight: 500; letter-spacing: -.04em; line-height: 1.16; }
.framework-section-intro > p { color: #9d9d9d; font-size: 16px; max-width: 480px; line-height: 1.8; }
.framework-capability-list { margin: 0; border-top: 1px solid #3e3428; }
.framework-capability { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); gap: 70px; padding-block: 28px; border-bottom: 1px solid #ffffff13; }
.framework-capability dt { font-size: 21px; font-weight: 500; letter-spacing: -.45px; line-height: 1.35; color: #e0d4c4; padding-top: 2px; }
.framework-capability dd { margin: 0; }
.framework-capability dd p { max-width: var(--framework-reading-width); color: #a0a0a0; font-size: 16px; line-height: 1.75; }
.framework-capability dd .framework-source-link { margin-top: 14px; font-size: 12px; }
.framework-note { display: flex; align-items: center; justify-content: space-between; gap: 34px; margin-top: 40px; padding: 22px 0 22px 25px; border-left: 2px solid #916127; }
.framework-note h3 { font-size: 16px; font-weight: 500; color: #d5b184; margin-bottom: 7px; }
.framework-note p { max-width: 750px; font-size: 14px; line-height: 1.75; color: #969087; }
.framework-note .framework-source-link { flex-shrink: 0; font-size: 12px; }
.framework-example { padding-block: 81px; background: #121212; border-block: 1px solid #ffffff09; }
.framework-example-grid { display: grid; grid-template-columns: minmax(200px, .65fr) minmax(0, 1.35fr); gap: 64px; align-items: center; }
.framework-section-label { color: #ba966c; font-size: 13px; margin-bottom: 18px; }
.framework-example-copy h2 { font-size: clamp(33px, 3vw, 43px); }
.framework-example-copy > p:not(.framework-section-label) { margin-top: 23px; color: #a1a1a1; font-size: 15px; line-height: 1.85; max-width: 370px; }
.framework-example-copy > a { margin-top: 27px; font-size: 13px; }
.framework-code { min-width: 0; width: 100%; background: #0d0d0d; border: 1px solid #5b44304d; border-radius: 13px; overflow: hidden; box-shadow: 0 17px 60px #0003; }
.framework-code-top, .framework-code-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 23px; font-size: 12px; }
.framework-code-top { border-bottom: 1px solid #ffffff0d; color: #bbae9e; }
.framework-code-top > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.framework-code-top > span:last-child { color: #6e6e6e; flex-shrink: 0; }
.framework-code pre { padding: 28px 25px; margin: 0; overflow-x: auto; max-height: 570px; font-family: var(--mono); font-size: 13px; line-height: 1.85; color: #d7cfc4; tab-size: 4; scrollbar-width: thin; scrollbar-color: #584632 transparent; }
.framework-code pre:focus-visible { outline-offset: -4px; }
.framework-code code { font: inherit; }
.framework-code-bottom { border-top: 1px solid #ffffff0d; color: #6e6e6e; font-size: 11px; }
.framework-code-bottom button { display: inline-flex; align-items: center; gap: 9px; padding: 3px 0; border: 0; background: none; color: #baa180; font-size: 12px; flex-shrink: 0; }
.framework-code-bottom button:hover { color: var(--amber); }
.framework-code-bottom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.framework-token-comment { color: #70736b; }
.framework-token-string { color: #cfba91; }
.framework-token-keyword { color: #c88c51; }
.framework-token-annotation { color: #baad94; }
.framework-token-number { color: #d7a765; }
.framework-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; }
.framework-steps li { position: relative; padding-top: 23px; border-top: 1px solid #63482b; }
.framework-step-number { display: block; color: #bd8c51; font-size: 15px; margin-bottom: 24px; }
.framework-steps h3 { font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -.45px; color: #dfd5c8; margin-bottom: 13px; }
.framework-steps p { color: #969696; font-size: 15px; line-height: 1.8; }
.framework-steps .framework-source-link { margin-top: 14px; font-size: 12px; }
.framework-walkthrough-link { display: flex; justify-content: flex-end; margin-top: 33px; }
.framework-book { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 88px; padding-block: 67px 90px; border-block: 1px solid #65432b45; }
.framework-book-art { position: relative; min-height: 380px; display: grid; place-items: center; isolation: isolate; }
.framework-book-art img { position: relative; display: block; width: auto; height: auto; max-width: 77%; max-height: 420px; object-fit: contain; filter: drop-shadow(8px 20px 22px #0009); transform: perspective(1000px) rotateY(-10deg) rotateZ(-3deg); }
.framework-book-light { position: absolute; inset: 7% -2%; background: radial-gradient(ellipse, #a766191c, transparent 65%); z-index: -1; }
.framework-book-copy h2 { font-size: clamp(34px, 3.6vw, 51px); max-width: 590px; }
.framework-book-subtitle { color: #cfb393; font-size: 19px; margin-top: 14px; line-height: 1.55; }
.framework-book-description { max-width: 590px; color: #9e9e9e; font-size: 16px; line-height: 1.85; margin-top: 22px; }
.framework-book-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 25px; margin-top: 29px; }
.framework-book-actions .button { font-size: 14px; padding: 13px 19px; gap: 25px; }
.framework-book-downloads { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 10px; padding-top: 11px; }
.framework-book-download { display: inline-flex; gap: 12px; align-items: center; color: #b6a18b; font-size: 13px; padding-bottom: 3px; border-bottom: 1px solid #51402f; }
.framework-book-download:hover { color: var(--amber); }
.framework-book-availability { color: #79746d; margin-top: 23px; font-size: 12px; line-height: 1.6; }
.framework-related-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #3e3428; }
.framework-related-list > li { border-bottom: 1px solid #ffffff13; }
.framework-related-list a { display: flex; justify-content: space-between; gap: 28px; padding: 23px 0; align-items: center; }
.framework-related-list a > span:first-child { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(0, 1.3fr); gap: 35px; width: 100%; }
.framework-related-list strong { font-size: 17px; font-weight: 500; color: #d0b99d; overflow-wrap: anywhere; }
.framework-related-list a > span:first-child > span { font-size: 14px; line-height: 1.75; color: #969696; max-width: 640px; }
.framework-related-list a > span:last-child { color: #9b7750; font-size: 20px; }
.framework-related-list a:hover strong, .framework-related-list a:hover > span:last-child { color: var(--amber); }
.framework-evidence { margin-top: 35px; padding-block: 10px; border-bottom: 1px solid #ffffff0d; }
.framework-evidence summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; color: #888; font-size: 13px; padding-block: 12px; }
.framework-evidence summary::-webkit-details-marker { display: none; }
.framework-evidence summary > span { color: #b38a5b; }
.framework-evidence[open] summary > span { transform: rotate(45deg); }
.framework-evidence ul { margin: 13px 0 21px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 17px 32px; }
.framework-evidence .framework-source-link { font-size: 12px; color: #aaa08f; }
.framework-continue { padding-top: 9px; padding-bottom: 80px; }
.framework-next { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 25px 45px; }
.framework-next > span:first-child > span { display: block; font-size: 13px; color: #8b8072; margin-bottom: 17px; }
.framework-next strong { font-size: clamp(33px, 4.3vw, 59px); font-weight: 500; line-height: 1.1; letter-spacing: -.045em; }
.framework-next-arrow { color: #c48c4c; font-size: 60px; line-height: 1; }
.framework-next:hover strong { color: #e9b577; }
.framework-language-nav { display: flex; flex-wrap: wrap; gap: 17px 33px; padding-top: 23px; border-top: 1px solid #ffffff13; }
.framework-language-nav a { color: #8c8c8c; font-size: 14px; }
.framework-language-nav a:hover, .framework-language-nav a[aria-current="page"] { color: var(--amber); }
.framework-page summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }

@media (max-width: 1100px) {
  .framework-hero-grid { gap: 24px; grid-template-columns: minmax(0, 1.75fr) minmax(180px, .7fr); }
  .framework-page .framework-hero h1 { font-size: 59px; }
  .framework-signal { transform: scale(.84); transform-origin: center; }
  .framework-example-grid { gap: 36px; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); }
  .framework-section-intro { gap: 50px; }
  .framework-capability { gap: 45px; }
  .framework-book { gap: 50px; }
  .framework-steps { gap: 28px; }
}
@media (max-width: 800px) {
  .framework-hero { padding-top: 124px; }
  .framework-hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: 38px 42px; }
  .framework-hero-copy { position: relative; z-index: 1; }
  .framework-page .framework-hero h1 { max-width: 680px; font-size: clamp(42px, 8vw, 64px); }
  .framework-product-name { font-size: 16px; margin-bottom: 19px; }
  .framework-hero-description { font-size: 17px; max-width: 610px; }
  .framework-signal { display: none; }
  .framework-runtime { padding-block: 22px; gap: 15px; flex-wrap: wrap; }
  .framework-runtime > span { font-size: 12px; }
  .framework-runtime li { font-size: 11px; }
  .framework-chapters > div { gap: 27px; }
  .framework-chapters a { font-size: 12px; padding-block: 16px 14px; }
  .framework-capabilities, .framework-walkthrough, .framework-connections { padding-block: 67px; }
  .framework-section-intro { gap: 25px; grid-template-columns: 1fr; margin-bottom: 33px; }
  .framework-section-intro > p { max-width: 640px; }
  .framework-page h2 { font-size: 37px; }
  .framework-capability { gap: 28px; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); }
  .framework-capability dt { font-size: 19px; }
  .framework-capability dd p { font-size: 15px; }
  .framework-note { flex-direction: column; align-items: flex-start; gap: 16px; padding-left: 20px; }
  .framework-example { padding-block: 60px; }
  .framework-example-grid { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .framework-example-copy > p:not(.framework-section-label) { max-width: 650px; }
  .framework-code pre { font-size: 13px; max-height: 470px; }
  .framework-steps { grid-template-columns: 1fr; gap: 27px; }
  .framework-steps li { display: grid; grid-template-columns: 33px 1fr; gap: 19px; }
  .framework-step-number { margin: 3px 0 0; }
  .framework-steps p { max-width: 600px; }
  .framework-walkthrough-link { justify-content: flex-start; margin-left: 52px; }
  .framework-book { grid-template-columns: minmax(190px, .7fr) minmax(0, 1.1fr); gap: 28px; padding-block: 48px 65px; }
  .framework-book-art { min-height: 280px; }
  .framework-book-art img { max-width: 94%; max-height: 325px; }
  .framework-book-copy h2 { font-size: 34px; }
  .framework-book-subtitle { font-size: 17px; }
  .framework-book-description { font-size: 15px; }
  .framework-book-actions { gap: 16px; }
  .framework-related-list a > span:first-child { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .framework-related-list a { padding-block: 23px; }
  .framework-next strong { font-size: 42px; }
  .framework-next-arrow { font-size: 48px; }
  .framework-continue { padding-bottom: 61px; }
}
@media (max-width: 520px) {
  .framework-hero { padding-top: 119px; }
  .framework-breadcrumb { font-size: 11px; gap: 10px; }
  .framework-page .framework-hero h1 { font-size: 43px; letter-spacing: -.047em; }
  .framework-hero-description { font-size: 16px; margin-top: 22px; }
  .framework-hero-actions { gap: 19px 23px; }
  .framework-hero-actions .button { font-size: 13px; padding: 13px 15px; gap: 15px; }
  .framework-source-link { font-size: 13px; }
  .framework-runtime { gap: 13px; }
  .framework-runtime > span { width: 100%; }
  .framework-runtime ul { gap: 7px; }
  .framework-runtime li { padding: 4px 10px; }
  .framework-chapters > div { width: calc(100% - 40px); gap: 24px; }
  .framework-page h2 { font-size: 33px; }
  .framework-section-intro > p { font-size: 15px; }
  .framework-capability { grid-template-columns: 1fr; gap: 11px; padding-block: 24px; }
  .framework-capability dt { font-size: 20px; }
  .framework-capability dd .framework-source-link { margin-top: 11px; }
  .framework-note { padding-left: 17px; }
  .framework-code-top, .framework-code-bottom { padding: 14px 17px; gap: 12px; }
  .framework-code-top { font-size: 11px; }
  .framework-code pre { padding: 21px 17px; font-size: 12px; }
  .framework-code-bottom { align-items: flex-start; }
  .framework-code-bottom > span { max-width: 145px; font-size: 10px; line-height: 1.6; }
  .framework-code-bottom button { font-size: 11px; padding: 0; }
  .framework-book { grid-template-columns: 1fr; gap: 34px; }
  .framework-book-art { min-height: 0; }
  .framework-book-art img { max-height: 340px; max-width: 62%; }
  .framework-book-copy h2 { font-size: 37px; }
  .framework-book-actions { gap: 23px; }
  .framework-book-downloads { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 20px; }
  .framework-evidence ul { display: grid; gap: 17px; }
  .framework-next { gap: 20px; }
  .framework-next strong { font-size: 36px; }
  .framework-next > span:first-child > span { font-size: 12px; max-width: 210px; }
  .framework-next-arrow { font-size: 38px; }
  .framework-language-nav { gap: 17px 24px; }
  .framework-language-nav a { font-size: 13px; }
}
@media (max-width: 350px) {
  .framework-page .framework-hero h1 { font-size: 38px; }
  .framework-hero-actions { flex-direction: column; align-items: flex-start; }
  .framework-code-top > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.framework-page) { scroll-behavior: auto; }
  .framework-page { scroll-behavior: auto; }
  .framework-page *, .framework-page *::before, .framework-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}