.qn-article__header { padding-block: var(--s-8) 0; max-width: 860px; } .qn-article__title { margin: 0; font-size: clamp(34px, 7vw, 58px); } .qn-article__dek { margin: var(--s-6) 0 0; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; max-width: 54ch; } .qn-article__lead { margin: var(--s-7) 0 0; } .qn-article__lead .qn-figure__img { display: block; width: 100%; height: auto; border: 1px solid var(--qn-border);  max-height: 68vh; object-fit: cover; } .qn-byline { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: var(--s-7); padding-block: var(--s-4); border-block: 1px solid var(--qn-border); font-size: 14px; color: var(--qn-faint); } .qn-byline__who { display: flex; align-items: center; gap: 12px; } .qn-byline__avatar { border-radius: 50%; display: block; } .qn-byline__author { color: var(--qn-text); } .qn-byline__dates { gap: 8px; } .qn-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } .qn-action { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--qn-muted); font-size: 14px; padding: 6px 8px; cursor: pointer; } .qn-action:hover { color: var(--qn-accent); } .qn-cite { flex-basis: 100%; margin-top: var(--s-4); padding: var(--s-5); border: 1px solid var(--qn-border-firm); background: var(--qn-surface); } .qn-cite__text { margin: 0 0 var(--s-4); font-size: 15px; line-height: 1.6; color: var(--qn-muted); } .qn-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-block: var(--s-9) var(--s-9); } .qn-shell--solo { grid-template-columns: minmax(0, 1fr); } .qn-shell__rail { align-self: start; position: sticky; top: calc(var(--qn-nav-h) + 16px); } .qn-shell__body { max-width: 70ch; min-width: 0; } .qn-shell--solo .qn-shell__body { max-width: 70ch; margin-inline: auto; }  .qn-toc { border-bottom: 0; } .qn-toc__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; padding-bottom: 10px; border-bottom: 1px solid var(--qn-border); } .qn-toc__summary::-webkit-details-marker { display: none; } .qn-toc__summary .qn-kicker { margin: 0; } .qn-toc__chevron { color: var(--qn-faint); transition: transform var(--d-base) var(--ease); } .qn-toc[open] .qn-toc__chevron { transform: rotate(180deg); } .qn-toc__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 11px; font-size: 14px; line-height: 1.4; } .qn-toc__item a { display: block; color: var(--qn-faint); border-left: 2px solid transparent; padding-left: 12px; transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); } .qn-toc__item a:hover { color: var(--qn-accent); border-left-color: var(--qn-accent); } .qn-toc__item--h3 a { padding-left: 24px; font-size: 13px; } .qn-toc__item.is-current > a { color: var(--qn-text); border-left-color: var(--qn-accent); } .qn-railwidgets { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--qn-border); } .qn-widget + .qn-widget { margin-top: var(--s-6); } .qn-widget__title { margin: 0 0 var(--s-3); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--qn-faint); }  .qn-panel { border: 1px solid var(--qn-border-firm); background: var(--qn-surface); padding: var(--s-6) var(--s-7); } .qn-insh { margin-bottom: var(--s-7); } .qn-insh__list { margin: 0; padding-left: var(--s-5); display: grid; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--qn-muted); } .qn-insh__list li::marker { color: var(--qn-accent); } .qn-references { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--qn-border); } .qn-references__title { margin: 0 0 var(--s-5); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--qn-text); } .qn-references__list { margin: 0; padding-left: var(--s-5); display: grid; gap: 14px; font-size: 16px; line-height: 1.55; color: var(--qn-muted); } .qn-references__list li::marker { color: var(--qn-accent); font-variant-numeric: tabular-nums; } .qn-references__list a { color: var(--qn-muted); border-bottom: 1px solid var(--qn-border-firm); } .qn-references__list a:hover { color: var(--qn-accent); border-bottom-color: var(--qn-accent); } .qn-references__doi { color: var(--qn-dim); font-size: 14px; white-space: nowrap; } .qn-faq { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--qn-border); } .qn-faq__list { margin-top: var(--s-5); } .qn-faq__item { padding-block: var(--s-4); border-bottom: 1px solid var(--qn-border-soft); } .qn-faq__q { margin: 0 0 6px; font-size: 19px; font-weight: 600; } .qn-faq__a { margin: 0; font-size: 16px; line-height: 1.6; color: var(--qn-muted); } .qn-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-7); } .qn-tags a { border: 1px solid var(--qn-border-firm); color: var(--qn-faint); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; } .qn-tags a:hover { border-color: var(--qn-accent); color: var(--qn-accent); } .qn-authorbox { margin-top: var(--s-8); border: 1px solid var(--qn-border-firm); padding: var(--s-6) var(--s-7); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: start; } .qn-authorbox__avatar img { border-radius: 50%; display: block; } .qn-authorbox__name { margin: 0 0 10px; font-size: 19px; font-weight: 600; font-family: var(--qn-display); } .qn-authorbox__bio { margin: 0; font-size: 16px; line-height: 1.6; color: var(--qn-muted); } .qn-authorbox__more { margin: var(--s-4) 0 0; } .qn-postnav { border-top: 1px solid var(--qn-border); } .qn-postnav__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); padding-block: var(--s-7); } .qn-postnav__link { display: grid; gap: 8px; } .qn-postnav__link--next { text-align: right; } .qn-postnav__label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--qn-faint); } .qn-postnav__link--next .qn-postnav__label { justify-content: flex-end; } .qn-postnav__title { font-family: var(--qn-display); font-size: 19px; font-weight: 600; line-height: 1.25; } .qn-related { border-top: 1px solid var(--qn-border); background: var(--qn-surface); } .qn-related .qn-wrap { padding-block: var(--s-8); } .qn-related .qn-grid { margin-top: var(--s-6); } .qn-pagelinks { display: flex; gap: 8px; align-items: center; margin-top: var(--s-7); font-size: 14px; } .qn-pagelinks__label { color: var(--qn-faint); } .qn-pagelinks__n { border: 1px solid var(--qn-border-firm); padding: 4px 10px; } .qn-authorhead__inner { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s-8); align-items: start; margin-top: var(--s-6); } .qn-authorhead__avatar img { border-radius: 50%; display: block; max-width: 100%; height: auto; } .qn-authorhead__name { font-size: clamp(32px, 6vw, 52px); } .qn-authorhead__links { margin: var(--s-5) 0 0; font-size: 14px; }  .qn-prose { font-size: var(--t-prose); line-height: 1.75; color: var(--qn-prose); } .qn-prose > *:first-child { margin-top: 0; } .qn-prose > *:last-child { margin-bottom: 0; } .qn-prose p { margin: 0 0 var(--s-6); } .qn-prose h2, .qn-prose h3, .qn-prose h4 { font-family: var(--qn-display); font-weight: 600; color: var(--qn-heading); letter-spacing: -.02em; scroll-margin-top: calc(var(--qn-nav-h) + 24px); text-wrap: balance; } .qn-prose h2 { font-size: var(--t-h2); line-height: 1.15; margin-block: var(--s-8) var(--s-4); } .qn-prose h3 { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.3; margin-block: var(--s-7) var(--s-4); } .qn-prose h4 { font-size: 19px; line-height: 1.4; margin-block: var(--s-6) var(--s-3); } .qn-prose a { color: var(--qn-text); background-image: linear-gradient(var(--qn-accent), var(--qn-accent)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; transition: color var(--d-fast) var(--ease), background-size var(--d-base) var(--ease); } .qn-prose a:hover { color: var(--qn-accent); background-size: 100% 2px; } .qn-prose strong { font-weight: 600; color: var(--qn-heading); } .qn-prose em { font-style: italic; } .qn-prose ul, .qn-prose ol { padding-left: var(--s-6); margin-block: var(--s-6); } .qn-prose li + li { margin-top: var(--s-3); } .qn-prose li::marker { color: var(--qn-accent); } .qn-prose blockquote { margin-block: var(--s-8); padding: var(--s-2) 0 var(--s-2) var(--s-6); border-left: 2px solid var(--qn-accent); font-size: clamp(20px, 2.6vw, 26px); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; font-style: normal; color: var(--qn-heading); } .qn-prose blockquote p:last-child { margin-bottom: 0; } .qn-prose blockquote cite { display: block; margin-top: var(--s-4); font-style: normal; font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--qn-faint); }  .qn-prose .qn-pullquote, .qn-prose .wp-block-pullquote { margin-block: var(--s-9); padding: var(--s-7) 0; border: 0; border-block: 1px solid var(--qn-border); text-align: left; background: transparent; } .qn-prose .qn-pullquote blockquote, .qn-prose .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; } .qn-prose .qn-pullquote p, .qn-prose .wp-block-pullquote p { font-family: var(--qn-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -.022em; color: var(--qn-heading); margin: 0; } .qn-prose .qn-pullquote cite, .qn-prose .wp-block-pullquote cite { display: block; margin-top: var(--s-4); font-size: 13px; font-style: normal; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--qn-faint); }  .qn-prose figure, .qn-prose .wp-block-image { margin-block: var(--s-8); } .qn-prose figure img, .qn-prose .wp-block-image img { width: 100%; height: auto; border: 1px solid var(--qn-border); border-radius: 0; } .qn-prose figcaption, .qn-prose .wp-element-caption { font-size: 13px; line-height: 1.5; color: var(--qn-faint); margin-top: 10px; max-width: 60ch; } .qn-prose figcaption strong, .qn-prose .wp-element-caption strong { color: var(--qn-muted); font-weight: 600; }  .qn-prose .alignwide, .qn-prose .wp-block-image.alignwide { width: min(112%, 100vw - 2 * var(--edge)); margin-inline: calc(50% - min(56%, 50vw - var(--edge))); } .qn-prose .alignfull { width: min(124%, 100vw - 2 * var(--edge)); margin-inline: calc(50% - min(62%, 50vw - var(--edge))); } .qn-prose .alignleft { float: left; margin: 6px var(--s-6) var(--s-4) 0; max-width: 45%; } .qn-prose .alignright { float: right; margin: 6px 0 var(--s-4) var(--s-6); max-width: 45%; } .qn-prose .aligncenter { margin-inline: auto; }  .qn-prose code { font-family: var(--qn-mono); font-size: .86em; background: var(--qn-card); color: var(--qn-accent); padding: 2px 6px; border: 1px solid var(--qn-border-soft); } .qn-prose pre { font-family: var(--qn-mono); font-size: 14px; line-height: 1.7; background: var(--qn-bg-deep); color: #E2E8F0; border: 1px solid var(--qn-border); padding: var(--s-6); overflow-x: auto; margin-block: var(--s-7); -webkit-overflow-scrolling: touch; tab-size: 2; } .qn-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } :root[data-theme="light"] .qn-prose pre { background: #0F172A; color: #E2E8F0; border-color: transparent; }  .qn-prose .qn-table-scroll, .qn-prose .wp-block-table, .qn-prose figure.wp-block-table { overflow-x: auto; margin-block: var(--s-7); -webkit-overflow-scrolling: touch; } .qn-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; min-width: 480px; } .qn-prose th, .qn-prose td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--qn-border); vertical-align: top; } .qn-prose thead th { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--qn-faint); border-bottom-color: var(--qn-border-firm); } .qn-prose tbody tr:last-child td { border-bottom: 0; } .qn-prose td { color: var(--qn-muted); } .qn-prose .wp-block-table figcaption { padding-left: 0; }  .qn-prose .math, .qn-prose .MathJax, .qn-prose mjx-container { font-size: 1.03em; } .qn-prose mjx-container[display="true"], .qn-prose .katex-display, .qn-prose .qn-equation { display: block; overflow-x: auto; overflow-y: hidden; margin-block: var(--s-7); padding: var(--s-5) var(--s-6); background: var(--qn-surface); border: 1px solid var(--qn-border-soft); text-align: center; } .qn-prose .qn-equation { position: relative; } .qn-prose .qn-equation__number { position: absolute; right: var(--s-5); top: 50%; transform: translateY(-50%); font-family: var(--qn-mono); font-size: 13px; color: var(--qn-faint); }  .qn-prose .qn-lede { font-size: 1.3125rem; line-height: 1.62; color: var(--qn-heading); font-weight: 400; }  .qn-prose .qn-dropcap::first-letter, .qn-prose .has-drop-cap:not(:focus)::first-letter { float: left; font-family: var(--qn-display); font-weight: 600; font-size: 3.9em; line-height: .84; padding: .06em .09em 0 0; color: var(--qn-accent); }  .qn-prose .qn-callout { border: 1px solid var(--qn-border); background: var(--qn-surface); padding: clamp(20px, 2.6vw, 30px); margin-block: var(--s-7); font-size: 16px; line-height: 1.7; } .qn-prose .qn-callout--accent { border-color: color-mix(in srgb, var(--qn-accent) 34%, transparent); background: var(--qn-accent-soft); } .qn-prose .qn-callout--violet { border-color: color-mix(in srgb, var(--qn-accent-2) 34%, transparent); background: var(--qn-violet-soft); } .qn-prose .qn-callout__label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--qn-accent); margin: 0 0 var(--s-3); } .qn-prose .qn-callout__figure { font-family: var(--qn-display); font-weight: 600; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; letter-spacing: -.024em; color: var(--qn-heading); margin: 0 0 var(--s-2); font-variant-numeric: tabular-nums; } .qn-prose .qn-callout p:last-child { margin-bottom: 0; }  .qn-prose .qn-takeaways { border: 1px solid color-mix(in srgb, var(--qn-accent) 26%, transparent); background: var(--qn-accent-soft); padding: clamp(20px, 2.6vw, 30px); margin-block: var(--s-7); } .qn-prose .qn-takeaways__title { font-family: var(--qn-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--qn-accent); margin: 0 0 var(--s-4); } .qn-prose .qn-takeaways ul { margin: 0; padding-left: var(--s-5); } .qn-prose .qn-takeaways li { font-size: 16px; line-height: 1.7; color: var(--qn-text); }  .qn-prose .wp-block-details, .qn-prose .qn-faq-item { border-bottom: 1px solid var(--qn-border); margin-block: 0; } .qn-prose .wp-block-details summary, .qn-prose .qn-faq-item summary { cursor: pointer; list-style: none; position: relative; padding: var(--s-5) var(--s-7) var(--s-5) 0; font-family: var(--qn-display); font-weight: 600; font-size: 19px; line-height: 1.4; color: var(--qn-heading); } .qn-prose summary::-webkit-details-marker { display: none; } .qn-prose .wp-block-details summary:hover, .qn-prose .qn-faq-item summary:hover { color: var(--qn-accent); } .qn-prose .wp-block-details summary::after, .qn-prose .qn-faq-item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-right: 1.5px solid var(--qn-accent); border-bottom: 1.5px solid var(--qn-accent); transform: rotate(45deg); transform-origin: center; transition: transform var(--d-base) var(--ease); } .qn-prose .wp-block-details[open] summary::after, .qn-prose .qn-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .qn-prose .wp-block-details > *:not(summary), .qn-prose .qn-faq-item > *:not(summary) { font-size: 16px; line-height: 1.7; color: var(--qn-muted); padding-bottom: var(--s-5); }  .qn-prose .qn-footnote-ref, .qn-prose sup a { font-size: .68em; font-weight: 600; color: var(--qn-accent); background: none; padding: 0 1px; vertical-align: super; line-height: 0; } .qn-prose .wp-block-footnotes, .qn-prose .qn-footnotes { font-size: 15px; line-height: 1.7; color: var(--qn-muted); padding-left: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--qn-border); } .qn-prose .qn-footnotes li + li, .qn-prose .wp-block-footnotes li + li { margin-top: var(--s-3); }  .qn-prose .qn-references { margin-top: var(--s-8); } .qn-prose .qn-references ol { margin: 0; padding-left: var(--s-5); font-size: 15px; line-height: 1.7; color: var(--qn-muted); } .qn-prose .qn-references li + li { margin-top: var(--s-3); }  .qn-prose .qn-toc { border: 1px solid var(--qn-border); padding: var(--s-5) var(--s-6); margin-block: var(--s-7); font-size: 15px; } .qn-prose .qn-toc ul, .qn-prose .qn-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .qn-prose .qn-toc li::marker { content: none; } .qn-prose .qn-toc a { background: none; border-left: 2px solid var(--qn-border-firm); padding-left: 12px; color: var(--qn-muted); } .qn-prose .qn-toc a:hover { color: var(--qn-accent); border-left-color: var(--qn-accent); } .qn-prose hr, .qn-prose .wp-block-separator { border: 0; border-top: 1px solid var(--qn-border); margin-block: var(--s-8); max-width: none; } .qn-prose .wp-block-embed, .qn-prose iframe { margin-block: var(--s-7); max-width: 100%; } .qn-prose .wp-block-button__link { border-radius: 0; background: var(--qn-accent); color: var(--qn-accent-ink); } @media (max-width: 1080px) { .qn-shell { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-block: var(--s-8) var(--s-8); } .qn-shell__rail { position: static; } .qn-shell__body, .qn-shell--solo .qn-shell__body { max-width: 70ch; margin-inline: 0; } .qn-toc { border: 1px solid var(--qn-border); padding: var(--s-4) var(--s-5); } .qn-toc__summary { padding-bottom: 0; border-bottom: 0; } .qn-toc[open] .qn-toc__summary { padding-bottom: var(--s-3); border-bottom: 1px solid var(--qn-border); } .qn-toc__list { max-height: 42vh; overflow-y: auto; } } @media (max-width: 1000px) { .qn-authorhead__inner { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-6); } } @media (max-width: 860px) { .qn-postnav__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .qn-postnav__link--next { text-align: left; } .qn-postnav__link--next .qn-postnav__label { justify-content: flex-start; } } @media (max-width: 720px) { .qn-shell__body, .qn-shell--solo .qn-shell__body { max-width: none; } .qn-panel { padding: var(--s-5); } .qn-authorbox { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); } .qn-authorbox__avatar img { width: 56px; height: 56px; } .qn-byline { gap: 10px; } .qn-actions { margin-left: 0; flex-basis: 100%; } .qn-prose .alignleft, .qn-prose .alignright { float: none; margin-inline: 0; max-width: 100%; } } @media (max-width: 560px) { .qn-authorhead__inner { grid-template-columns: minmax(0, 1fr); } .qn-authorhead__avatar img { width: 88px; height: 88px; } }