/* Resources serve the task: a short answer, a useful tool, or a clear route deeper. */
.resources-flow .res { width: min(1120px, calc(100% - 80px)); padding-top: 142px; }
.resources-flow h1, .resources-flow h2, .resources-flow h3 { text-wrap: balance; }
.resources-flow p { text-wrap: pretty; }
.resources-flow .nb { white-space: normal; }
.resource-heading { max-width: 880px; margin: 0 auto 44px; text-align: center; }
.resource-heading h1, .resources-flow .res-head h1 { max-width: none; font-size: clamp(36px, 4vw, 52px); font-weight: 440; line-height: 1.1; letter-spacing: -.035em; }
.resource-heading > p:not(.reading-crumbs) { max-width: 56ch; margin: 22px auto 0; color: #555e67; font-size: 18px; line-height: 1.6; }
.reading-crumbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; color: #626671; font-size: 13px; line-height: 1.5; }
.reading-crumbs a { display: inline-flex; align-items: center; min-height: 36px; color: #555e67; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #b7bdc7; }
.reading-crumbs a:hover { color: #a72135; }
.reading-crumbs span { color: #7b8290; }
/* The objects are the navigation. The tool menu stays compact and useful. */
.resource-heading--hub { max-width: none; margin-bottom: 22px; }
.resource-heading--hub h1 { max-width: none; font-size: clamp(34px, 4vw, 54px); letter-spacing: -.04em; }
.resource-heading--hub > p { margin-top: 20px; font-size: 17px; }
.resource-workbench { max-width: 920px; margin: 0 auto; }
.resource-switch { display: flex; width: min(850px, 100%); justify-content: center; gap: 30px; margin: 0 auto; }
.resource-switch button { position: relative; flex: 1; min-width: 0; padding: 0 0 25px; border: 0; background: none; color: #525965; font: inherit; cursor: pointer; }
.resource-object { display: block; position: relative; height: 185px; transition: transform 400ms cubic-bezier(.22,1,.36,1), filter 300ms; filter: saturate(.55); }
.resource-object::after { content: ''; position: absolute; bottom: 6px; left: 18%; right: 18%; height: 10px; border-radius: 50%; background: #6c7a8b0e; filter: blur(8px); transition: opacity 300ms; }
.resource-art { width: 100%; height: 100%; overflow: visible; }
.resource-switch button:hover .resource-object, .resource-switch button:focus-visible .resource-object { transform: translateY(-8px); filter: none; }
.resource-switch button[aria-selected="true"] .resource-object { transform: translateY(-6px); filter: none; }
.resource-switch button[aria-selected="true"] .resource-tab-label { color: #b12337; }
.resource-tab-label { display: block; position: relative; font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -.025em; transition: color 180ms; }
.resource-tab-label::after { content: ''; position: absolute; width: 22px; height: 3px; border-radius: 3px; background: #be2b3e; left: calc(50% - 11px); bottom: -24px; transform: scaleX(0); transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.resource-switch button[aria-selected="true"] .resource-tab-label::after { transform: scaleX(1); }
.resource-stage { position: relative; margin-top: 20px; }
.resource-pane-label { text-align: center; padding: 15px; font-size: 22px; }
.is-enhanced .resource-pane-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
.resource-pane + .resource-pane { margin-top: 9px; }
.is-enhanced .resource-pane + .resource-pane { margin: 0; }
.resource-tool-menu { display: flex; gap: 0; border: 1px solid #dce1e8; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 1px 1px #fff, 0 12px 30px -25px #35445c66; }
.resource-tool-link { display: flex; flex-direction: column; justify-content: center; position: relative; flex: 1; min-width: 0; min-height: 88px; padding: 22px 28px; background: transparent; transition: background 180ms; }
.resource-tool-link + .resource-tool-link::before { content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px; background: #e3e7ed; }
.resource-tool-name { color: #2c3037; font-size: 16px; font-weight: 480; line-height: 1.35; letter-spacing: -.025em; padding-right: 22px; }
.resource-tool-hint { color: #606873; font-size: 13px; line-height: 1.5; margin-top: 7px; }
.resource-tool-link > svg { position: absolute; right: 18px; top: calc(50% - 8px); width: 17px; height: 17px; fill: none; stroke: #aa2639; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms; }
.resource-tool-link:hover { background: #fafbfc; }
.resource-tool-link:hover > svg { transform: translateX(3px); }
.resource-tool-link:focus-visible { outline-offset: -4px; }
/* Secondary destinations stay a single quiet navigation line. */
.resource-bottom-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin: 34px auto 0; color: #747d89; font-size: 13px; }
.resource-bottom-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #525e6d; text-decoration: underline; text-decoration-color: #c2c9d2; text-underline-offset: 5px; }
.resource-bottom-nav a:hover { color: #a72135; }
.resource-directory { max-width: 780px; margin: 28px auto 0; text-align: center; color: #626c79; font-size: 13px; }
.resource-directory > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; cursor: pointer; }
.resource-directory > summary::-webkit-details-marker { display: none; }
.resource-directory > summary::after { content: '+'; color: #a72135; }
.resource-directory[open] > summary::after { content: '−'; }
.resource-pane.is-entering .resource-tool-menu { animation: resource-select 250ms cubic-bezier(.22,1,.36,1); }
@keyframes resource-select { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 760px) { .resource-heading--hub h1 { white-space: nowrap; } }
@media (max-width: 900px) { .resource-switch { gap: 5px; } .resource-object { height: 190px; } .resource-tool-link { padding: 19px 17px; } .resource-tool-name { font-size: 16px; } .resource-tool-hint { font-size: 12px; } }
@media (max-width: 650px) {
 .resource-heading--hub { margin-bottom: 20px; }
 .resource-heading--hub h1 { max-width: 18ch; margin-inline: auto; font-size: clamp(30px, 8vw, 42px); }
 .resource-heading--hub > p { max-width: 28ch; font-size: 15px; margin-top: 15px; }
 .resource-switch { width: calc(100% + 20px); margin-left: -10px; gap: 0; }
 .resource-switch button { padding-bottom: 20px; }
 .resource-object { height: 105px; }
 .resource-tab-label { font-size: 14px; letter-spacing: -.025em; }
 .resource-tab-label::after { bottom: -20px; width: 17px; left: calc(50% - 8.5px); }
 .resource-stage { margin-top: 14px; }
 .resource-tool-menu { flex-direction: column; border-radius: 11px; }
 .resource-tool-link { min-height: 65px; padding: 18px 22px; }
 .resource-tool-link + .resource-tool-link::before { left: 22px; right: 22px; top: 0; bottom: auto; width: auto; height: 1px; }
 .resource-bottom-nav { gap: 12px; margin-top: 22px; font-size: 12px; }
 .resource-tool-name { font-size: 16px; }
 .resource-tool-hint { margin-top: 4px; font-size: 12px; }
 .resource-tool-link > svg { top: calc(50% - 8px); }
}
@media (prefers-reduced-motion: reduce) { .resource-switch *, .resource-tool-link, .resource-tool-link > svg { transition: none; } .resource-pane.is-entering .resource-tool-menu { animation: none; } }
@media print { .resource-switch, .resource-library-entry, .resource-api-entry { display: none !important; } .resource-stage { box-shadow: none; } .resource-pane { break-inside: avoid; } }
.reading-link { display: inline-flex; align-items: center; min-height: 44px; color: #a32336; text-decoration: underline; text-underline-offset: 5px; font-size: 15px; font-weight: 500; }
.reading-link:hover { color: #771b2a; }
.resource-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 22px auto 0; max-width: 900px; }
.resource-topics a, .resource-collections a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: #4b5664; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #b9c0cb; }
.resource-topics a:hover, .resource-collections a:hover { color: #a72135; }
.resource-topic-section { margin-top: 64px; text-align: center; }
.resource-topic-section h2 { font-size: 23px; font-weight: 480; letter-spacing: -.02em; }
.resource-collections { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 24px; }
.resource-platform { max-width: 880px; margin: 54px auto 0; border-block: 1px solid #d7dde5; }
.resource-platform > summary { padding: 24px 0; cursor: pointer; font-size: 18px; color: #353e4a; }
.resource-platform .caps { padding-bottom: 26px; }
.reading-page { max-width: 820px; margin-inline: auto; }
.reading-head { margin-bottom: 36px; }
.reading-head .reading-crumbs { justify-content: flex-start; }
.resources-flow .reading-head h1 { max-width: 28ch; margin: 14px 0 0; font-size: clamp(34px, 3.6vw, 48px); font-weight: 450; line-height: 1.15; letter-spacing: -.03em; }
.reading-lead { margin-top: 20px; max-width: 62ch; color: #525d6b; font-size: 18px; line-height: 1.65; }
.reading-meta { margin-top: 20px; color: #626b77; font-size: 13px; line-height: 1.5; }
.reading-answer { padding: 28px 30px; margin-bottom: 28px; background: #eef1f5; border-radius: 20px; }
.reading-answer h2 { font-size: 15px; line-height: 1.4; font-weight: 530; color: #a32336; margin-bottom: 14px; }
.reading-answer p, .reading-answer li { font-size: 18px; line-height: 1.7; color: #323b47; }
.reading-answer p + p { margin-top: 14px; }
.reading-answer ul, .reading-answer ol { padding-left: 22px; }
.reading-answer a { text-decoration: underline; text-underline-offset: 4px; }
.reading-detail { border-bottom: 1px solid #d9dee6; margin: 0; }
.reading-detail > summary { display: flex; align-items: center; flex-wrap: wrap; column-gap: 20px; row-gap: 7px; position: relative; padding: 23px 40px 23px 0; list-style: none; cursor: pointer; color: #333c48; font-size: 18px; font-weight: 490; line-height: 1.4; }
.reading-detail > summary::-webkit-details-marker { display: none; }
.reading-detail > summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 23px; color: #a32336; font-weight: 400; }
.reading-detail[open] > summary::after { content: '−'; }
.reading-detail > summary:hover { color: #a32336; }
.reading-detail__hint { margin-left: auto; color: #606b7b; font-size: 13px; font-weight: 400; }
.reading-detail__body { padding: 2px 0 28px; color: #454f5e; font-size: 16px; line-height: 1.7; }
.reading-detail__body h2 { font-size: 23px; font-weight: 490; line-height: 1.3; letter-spacing: -.02em; color: #2e3742; margin: 28px 0 14px; }
.reading-detail__body h3 { font-size: 18px; font-weight: 520; line-height: 1.4; color: #35404d; margin: 24px 0 10px; }
.reading-detail__body p + p { margin-top: 16px; }
.reading-detail__body ul, .reading-detail__body ol { margin: 12px 0 18px; padding-left: 22px; }
.reading-detail__body li { margin: 8px 0; }
.reading-detail__body a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #afb8c5; }
.reading-detail__body a:hover { color: #a72135; }
.reading-detail__body blockquote { margin: 12px 0; font-size: 20px; line-height: 1.6; color: #303b49; }
.reading-full > summary { font-size: 20px; }
.reading-full > summary > span:first-child { color: #a32336; }
.reading-takeaways { padding: 2px 0 18px; }
.reading-takeaways h2 { margin-top: 10px; }
.reading-outline { padding: 24px 0; border-block: 1px solid #dce2e9; }
.reading-outline h2 { margin-top: 0; font-size: 17px; }
.reading-outline ul { list-style: none; padding: 0; margin: 12px 0 0; columns: 2; column-gap: 32px; }
.reading-outline li { break-inside: avoid; margin: 0; }
.reading-outline a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 7px; font-size: 14px; line-height: 1.4; }
.resources-flow .res-body { margin-top: 30px; font-size: 17px; line-height: 1.75; }
.resources-flow .res-body h2 { font-size: 27px; margin-top: 42px; }
.resources-flow .res-body h2:first-child { margin-top: 0; }
.resources-flow .res-body blockquote { padding: 20px 24px; border: 0; border-radius: 12px; background: #edf0f4; }
.reading-table { overflow-x: auto; margin-block: 22px; }
.reading-table table { margin: 0; min-width: 500px; }
.reading-table:focus-visible { outline: 2px solid #a72135; outline-offset: 4px; }
.reading-product .res-status { font-size: 14px; }
.reading-product .res-status strong { display: block; margin-top: 12px; }
.reading-product .res-status span { color: #606b7b; }
.reading-quote { margin: 0 0 28px; padding: 26px 0; border-block: 1px solid #d9dee6; }
.reading-quote blockquote { margin: 0; font-size: 24px; line-height: 1.5; letter-spacing: -.02em; color: #343d49; }
.reading-quote figcaption { margin-top: 16px; font-size: 12px; color: #636d7a; }
.reading-note { color: #586574; font-size: 15px; }
.reading-definition { font-size: 20px; line-height: 1.7; color: #343e4c; margin-bottom: 32px; }
.reading-definition p + p { margin-top: 20px; }
.reading-definition a { text-decoration: underline; text-underline-offset: 4px; }
.reading-related { margin: 36px 0 0; }
.reading-related h2 { font-size: 15px; font-weight: 510; color: #596573; }
.reading-related ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; }
.reading-related a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: #414f60; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #bcc5d1; }
.reading-related a:hover { color: #a72135; }
.reading-return { margin-top: 28px; }
.resources-flow .reading-page .qa { margin-top: 64px; }
.resources-flow .close { margin-top: 100px; }
.resources-flow .api-section { max-width: 820px; margin: 40px auto 0; }
.resources-flow .api-section.reading-detail { margin-top: 0; }
.resources-flow .api-section h2 { font-size: 27px; }
.resources-flow .api-section p, .resources-flow .api-steps { font-size: 16px; line-height: 1.7; }
.resources-flow .api-code { font-size: 13px; white-space: pre; overflow-x: auto; }
@media (max-width: 900px) {
  .resources-flow .res { width: calc(100% - 56px); padding-top: 132px; }
  .reading-detail__hint { margin-left: 0; }
}
@media (max-width: 600px) {
  .resources-flow .res { width: calc(100% - 40px); padding-top: 126px; }
  .resource-heading { margin-bottom: 30px; }
  .resource-heading h1, .resources-flow .res-head h1 { font-size: clamp(32px, 9vw, 44px); }
  .resource-heading > p:not(.reading-crumbs) { font-size: 16px; margin-top: 18px; }
  .resource-topics { gap: 4px 20px; }
  .resource-topics a, .resource-collections a { font-size: 14px; }
  .resource-collections { gap: 18px; }
  .reading-head { margin-bottom: 28px; }
  .resources-flow .reading-head h1 { font-size: clamp(30px, 8vw, 40px); line-height: 1.17; }
  .reading-crumbs { font-size: 12px; gap: 8px; }
  .reading-lead { font-size: 16px; margin-top: 18px; }
  .reading-meta { font-size: 12px; margin-top: 16px; }
  .reading-answer { padding: 23px 22px; border-radius: 17px; margin-bottom: 18px; }
  .reading-answer p, .reading-answer li { font-size: 16px; line-height: 1.65; }
  .reading-detail > summary { padding-block: 20px; font-size: 17px; }
  .reading-detail__hint { flex-basis: 100%; font-size: 12px; }
  .reading-detail__body { font-size: 15px; }
  .reading-full > summary { font-size: 19px; }
  .reading-outline ul { columns: 1; }
  .resources-flow .res-body { font-size: 16px; }
  .resources-flow .res-body h2 { font-size: 24px; }
  .reading-definition { font-size: 18px; }
  .reading-quote blockquote { font-size: 21px; }
  .reading-related { margin-top: 28px; }
  .reading-related a { font-size: 14px; }
  .resources-flow .close { margin-top: 72px; }
  .resources-flow .reading-page .qa { margin-top: 52px; }
}
@media (prefers-reduced-motion: reduce) { .resource-tool-link h3, .resource-tool-link > span { transition: none; } }
@media print {
  .resources-flow .res-body { display: block !important; }
  .resources-flow .site-header, .resources-flow .site-footer, .resource-jumps, .resources-flow .close { display: none; }
  .resources-flow .res { width: 100%; padding: 0; }
  .reading-page { max-width: none; }
  .reading-detail { break-inside: auto; }
  .reading-detail__body { display: block !important; }
  .reading-table { overflow: visible; }
}

/* The selected tool menu explains input and outcome in one compact line. */
.resource-tool-link { min-height: 124px; padding-right: 37px; }
.resource-tool-hint { max-width: 29ch; font-size: 13px; line-height: 1.55; }
.resource-tool-link > svg { right: 15px; }
@media (max-width: 900px) { .resource-tool-link { padding-right: 31px; } }
@media (max-width: 600px) { .resource-tool-link { min-height: 89px; padding-right: 42px; } .resource-tool-hint { max-width: 34ch; font-size: 12px; } }