@import url("https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@600&family=Sarabun:ital,wght@0,400;0,600;1,400&display=swap");
/* Design tokens & layout */
:root { --sf-u-16: 1rem; --sf-rule: rgb(48 57 64); --sf-hero-bg: rgb(25 31 36); --sf-u-6: 0.375rem; --sf-page: rgb(19 23 27); --sf-u-14: 0.875rem; --sf-highlight: rgb(222 103 228); --sf-u-20: 1.25rem; --sf-hero-text: rgb(244 245 246); --sf-u-18: 1.125rem; --sf-u-12: 0.75rem; --sf-u-2: 0.125rem; --sf-body-font: 'Sarabun', system-ui, sans-serif; --sf-wash: rgb(36 44 50); --sf-u-40: 2.5rem; --sf-heading-font: 'Chivo Mono', 'SFMono-Regular', Consolas, monospace; --sf-u-4: 0.25rem; --sf-u-10: 0.625rem; --sf-u-8: 0.5rem; --sf-round: 0.625rem; --sf-link: rgb(110 114 207); --sf-text: rgb(232 235 237); --sf-u-36: 2.25rem; --sf-u-24: 1.5rem; --sf-panel: rgb(30 36 41); --sf-u-32: 2rem; --sf-text-2: rgb(150 159 166); --sf-link-hover: rgb(118 119 147) }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { font-size: 1.188rem }
body { font-family: var(--sf-body-font); line-height: 1.71; background: var(--sf-page) }
body { margin: 0rem; -webkit-font-smoothing: antialiased; color: var(--sf-text) }
pre { max-inline-size: 100%; overflow-x: auto }
code { overflow-wrap: anywhere }
img { display: block; max-inline-size: 100%; block-size: auto }
.pe-info-bar { margin: 0rem; font-size: .9em; display: flex; line-height: 1.35 }
.pe-info-bar { gap: var(--sf-u-10); justify-content: space-between; color: var(--sf-page) }
.pe-info-bar { background: var(--sf-link); align-items: center; padding: var(--sf-u-10) 0.938rem var(--sf-u-10) 0.938rem }
.pe-info-bar p { flex: 1 1 auto; margin: 0 }
.pe-info-bar span { flex: 1 1 auto; margin: 0 }
.pe-info-bar a { color: var(--sf-page); font-weight: 700; text-decoration: underline }
.pe-bar-x { background: transparent; cursor: pointer; border: 0; color: var(--sf-page); padding-block: 0.125rem }
.pe-bar-x { line-height: 1; padding-inline: 0.313rem; font-size: 1.1em }
.pe-info-bar[hidden] { display: none }
a { color: var(--sf-link) }
a:hover { color: var(--sf-link-hover) }
h1 { font-weight: 600; letter-spacing: 0; line-height: 1.2; font-family: var(--sf-heading-font); margin: 0 0 .57em }
h2 { margin: 0 0 .57em; font-weight: 600; line-height: 1.2; letter-spacing: 0; font-family: var(--sf-heading-font) }
h3 { font-family: var(--sf-heading-font); font-weight: 600; letter-spacing: 0; margin: 0 0 .57em; line-height: 1.2 }
h4 { letter-spacing: 0; font-weight: 600; font-family: var(--sf-heading-font); margin: 0 0 .57em; line-height: 1.2 }
h1 { font-size: 2.35rem }
h2 { margin-block-start: 1.71em; font-size: 1.74rem }
h3 { margin-block-start: 1.33em; font-size: 1.32rem }
h2 span[id],h3 span[id] { scroll-margin-top: 5.625rem }
.pe-text-body { max-inline-size: 100% }
.pe-text-body p { margin-block-end: 1.16em }
.pe-text-body ul { padding-left: 1.47em; margin-bottom: 1.06em }
.pe-text-body ol { padding-left: 1.47em; margin-bottom: 1.06em }
.pe-text-body li { margin-block-end: .33em; margin-block-start: .33em }
.pe-text-body table { inline-size: 100%; margin-block-start: 1.23em; border-collapse: collapse; font-size: .94em; margin-block-end: 1.23em }
.pe-text-body table { display: block; overflow-x: auto }
.pe-text-body th { border: 0.063rem solid var(--sf-rule); padding: 0.563rem 0.813rem 0.563rem 0.813rem; text-align: start }
.pe-text-body td { border: 0.063rem solid var(--sf-rule); text-align: start; padding: 0.563rem 0.813rem 0.563rem 0.813rem }
.pe-text-body th { background: var(--sf-wash); font-weight: 600 }
.pe-text-body blockquote { border-radius: var(--sf-round); margin: 1.13em 0 1.13em 0; background: var(--sf-panel) }
.pe-text-body blockquote { padding: 0.688rem 1.188rem 0.688rem 1.188rem; border-inline-start: 0.25rem solid var(--sf-highlight) }
.pe-text-body .pe-cite { font-size: .8em; white-space: nowrap }
.pe-text-body .pe-cite a { border-block-end: 0.063rem dotted var(--sf-highlight); text-decoration-line: none }
.pe-text-body code { border-radius: 0.25rem; font-size: .92em }
.pe-text-body code { background: var(--sf-wash); padding: 0.063rem 0.313rem 0.063rem 0.313rem }
.pe-text-body img { border-radius: var(--sf-round); margin-block-end: 1.02em; margin-block-start: 1.02em }
.pe-quick-answer { border-left: 0.25rem solid var(--sf-link); padding: 1.188rem var(--sf-u-20); background: var(--sf-wash); margin-bottom: 1.625rem }
.pe-quick-answer { border-radius: 0.563rem; font-size: 1.06em }
.pe-quick-answer p:last-child { margin-block-end: 0 }
.pe-plus-minus { border-spacing: 1.188rem 0; width: 100%; border-collapse: separate }
.pe-plus-minus { margin: var(--sf-u-20) -18px var(--sf-u-20) -18px; table-layout: fixed }
.pe-plus-minus th { padding: 0 1.188rem 0.438rem; text-align: left }
.pe-plus-minus th { font-family: var(--sf-heading-font); font-size: 1.1em }
.pe-plus-minus td { background: var(--sf-panel) }
.pe-plus-minus td { padding-inline: 1.313rem; padding-block: 0.938rem; border: 0.063rem solid var(--sf-rule); border-radius: 0.688rem }
.pe-plus-minus ul { margin: 0; padding-left: 1.3em }
.pe-footnotes { margin: 2.375rem 0 0; font-size: .9em; color: var(--sf-text-2) }
.pe-footnotes { padding-block-start: var(--sf-u-16); border-block-start: 0.063rem solid var(--sf-rule) }
.pe-footnotes ol { padding-inline-start: 1.27em }
.pe-footnotes li { margin: .3em 0 }
.pe-footnotes a { color: var(--sf-text-2) }
.pe-blockquote-box { font-style: italic; font-size: 1.15em }
.pe-blockquote-box { border-left: 0.25rem solid var(--sf-highlight); background: var(--sf-panel) }
.pe-blockquote-box { padding: 1.375rem 1.625rem; margin: 1.563rem 0 1.563rem 0; border-radius: var(--sf-round) }
.pe-blockquote-box blockquote { margin: 0; padding: 0 }
.pe-blockquote-box blockquote { background: transparent; border: 0 }
.pe-blockquote-box figcaption { color: var(--sf-text-2) }
.pe-blockquote-box figcaption { font-size: .85em; font-style: normal; margin-block-start: var(--sf-u-8) }
.pe-promo { margin: var(--sf-u-36) 0 }
.pe-promo { background: var(--sf-link); padding: 2.188rem }
.pe-promo { text-align: center; border-radius: var(--sf-round); color: #111111 }
.pe-promo p:first-child { color: inherit }
.pe-promo p:first-child { margin-top: 0; line-height: 1.2; font-size: 1.57rem; font-family: var(--sf-heading-font) }
.pe-table-cards>dl { border-radius: var(--sf-round); margin: 0.688rem 0 }
.pe-table-cards>dl { display: grid; padding: var(--sf-u-12) var(--sf-u-16); gap: 0.438rem 1.063rem }
.pe-table-cards>dl { border: 0.063rem solid var(--sf-rule); grid-template-columns: auto 1fr; background: var(--sf-panel) }
.pe-table-cards dt { font-size: .9em; font-weight: 600; color: var(--sf-text-2) }
.pe-table-cards dd { margin: 0 }
.pe-btn { background: var(--sf-highlight); display: inline-block }
.pe-btn { padding: 0.688rem 1.688rem 0.688rem 1.688rem; color: #111111; font-weight: 600; margin-block-start: var(--sf-u-10); text-decoration-line: none; border-radius: var(--sf-round) }
.pe-btn:hover { color: #111111 }
.pe-listing { grid-template-columns: repeat(auto-fill,minmax(15.625rem,1fr)); display: grid }
.pe-listing { margin-block-end: 1.563rem; gap: 1.313rem; margin-block-start: 1.563rem }
.pe-tile { padding: 1.188rem }
.pe-tile { color: #ffffff; border-radius: 0.688rem; background: var(--sf-panel) }
.pe-tile { outline: 0.063rem solid rgb(48 57 64); gap: 0.438rem; display: grid; outline-offset: -1px }
.pe-tile h2 { font-size: 1.08em; color: #ffffff; margin: 0 }
.pe-tile h3 { color: #ffffff; margin: 0; font-size: 1.08em }
.pe-tile p { margin: 0; color: var(--sf-text-2); font-size: .95em }
.pe-tile a { font-weight: 600; color: #ffffff; text-decoration-line: none }
.pe-cards { grid-template-columns: repeat(3,minmax(0,1fr)); display: grid }
.pe-cards { margin: 1.438rem 0; gap: 1.375rem }
.pe-cards .pe-tile { overflow: hidden; padding: 0; box-shadow: 0 0.25rem 1.125rem rgb(232 235 237 / 0.08) }
.pe-cards .pe-tile .pe-card-media { inline-size: 100%; background: rgb(232 235 237 / 0.9); aspect-ratio: 4 / 3; block-size: auto; outline: 0.063rem solid rgb(232 235 237 / 0.25); padding: var(--sf-u-8); max-inline-size: 100%; object-fit: contain; outline-offset: -1px }
.pe-cards .pe-card-body { padding: var(--sf-u-20) }
.pe-cards .pe-card-body { min-width: 0; display: grid; gap: var(--sf-u-8) }
.pe-cards .pe-card-actions { gap: var(--sf-u-10); margin-block-start: auto; display: flex; flex-wrap: wrap; align-items: center }
.pe-cards .pe-card-onion { display: block }
.pe-cards .pe-card-onion { color: var(--sf-text-2); min-inline-size: 0 }
.pe-cards .pe-card-onion { line-height: 1.35; font-size: .85em }
.pe-cards .pe-card-onion code { font-family: inherit; overflow-wrap: anywhere }
.pe-cards .pe-card-reverse { grid-column: span 1 }
.pe-cards-v2 { grid-template-columns: 1fr }
.pe-cards.pe-cards-v2 > .pe-tile { flex-direction: row; text-align: start; display: flex; align-items: stretch }
.pe-cards-v2 .pe-card-reverse .pe-card-media { order: 2 }
.pe-cards-v2 .pe-tile .pe-card-media { width: min(34%,260px); aspect-ratio: 4 / 3; flex-shrink: 0 }
.pe-cards-v3 { grid-template-columns: 1fr }
.pe-cards.pe-cards-v3 > .pe-tile { align-items: center; flex-direction: row; display: flex }
.pe-cards.pe-cards-v3 > .pe-tile { padding: 0.813rem; text-align: start }
.pe-cards.pe-cards-v3 > .pe-tile .pe-card-media { inline-size: 6.375rem; block-size: 6.375rem; aspect-ratio: 1 / 1 }
.pe-cards.pe-cards-v3 > .pe-tile .pe-card-media { flex-shrink: 0; border-radius: 66.563rem }
.pe-cards.pe-cards-v3 > .pe-tile .pe-card-body { min-inline-size: 0; flex: 1 1 auto; padding: 0.563rem 0.813rem 0.563rem 0.813rem }
.pe-cards-v4 { grid-template-columns: 1fr }
.pe-cards.pe-cards-v4 > .pe-tile { text-align: left; display: grid; grid-template-columns: minmax(11.25rem,34%) 1fr }
.pe-cards-v4 .pe-tile .pe-card-media { block-size: 100%; aspect-ratio: 4 / 3 }
.pe-card-lead { max-inline-size: 70ch; margin-block-end: var(--sf-u-18); color: var(--sf-text-2) }
.pe-cards .pe-btn { text-align: center; margin-top: 0; white-space: normal }
.pe-notex { background: var(--sf-wash); border: 0.063rem solid rgb(48 57 64 / 0.85) }
.pe-subbar { background: var(--sf-wash); border: 0.063rem solid rgb(48 57 64 / 0.85) }
.pe-utility { border: 0.063rem solid rgb(48 57 64 / 0.85); background: var(--sf-wash) }
.pe-notex { padding-inline: 0.813rem; margin-block-start: var(--sf-u-20); padding-block: 0.625rem; margin-block-end: var(--sf-u-20); display: block; border-radius: 0.563rem }
.pe-subbar { border-radius: 0.563rem; margin-block-end: var(--sf-u-20); padding-block: 0.625rem; padding-inline: 0.813rem; margin-block-start: var(--sf-u-20); display: block }
.pe-utility { padding-block: 0.625rem; border-radius: 0.563rem; padding-inline: 0.813rem; display: block; margin-block-end: var(--sf-u-20); margin-block-start: var(--sf-u-20) }
.pe-notex { font-size: .88em; line-height: 1.45 }
.pe-subbar { line-height: 1.45; font-size: .88em }
.pe-utility { font-size: .88em; line-height: 1.45 }
.pe-notex a { font-weight: 600 }
.pe-subbar a { font-weight: 600 }
.pe-utility a { font-weight: 600 }
.pe-utility { text-align: left }
.pe-ctx { margin-block-end: var(--sf-u-32); background: var(--sf-wash); max-inline-size: 100%; margin-block-start: var(--sf-u-32); padding-inline: 1.625rem; padding-block: 1.125rem; border: 0.063rem solid rgb(48 57 64 / 0.9); border-inline-start: 0.313rem solid var(--sf-highlight); border-radius: var(--sf-round) }
.pe-ctx h2, .pe-ctx h3 { margin-top: 0; font-size: 1.08em }
.pe-ctx p:last-child { margin-block-end: 0 }
.pe-ctx ul { padding-inline-start: 1.11em; margin: 0 }
.pe-navigation .pe-cat-link { color: #ffffff }
.pe-colophon .pe-cat-link { color: #ffffff }
.pe-cat-link { color: #ffffff }
.pe-navigation .pe-cat-link.pe-cat-link-0 { color: #ffffff; font-weight: 700 }
.pe-colophon .pe-cat-link.pe-cat-link-0 { font-weight: 700; color: #ffffff }
.pe-cat-link.pe-cat-link-0 { font-weight: 700; color: #ffffff }
.pe-navigation .pe-cat-link.pe-cat-link-1 { color: #111111; background: var(--sf-highlight); border-radius: var(--sf-round); padding: var(--sf-u-2) var(--sf-u-8) var(--sf-u-2) var(--sf-u-8); display: inline-block }
.pe-colophon .pe-cat-link.pe-cat-link-1 { padding: var(--sf-u-2) var(--sf-u-8) var(--sf-u-2) var(--sf-u-8); display: inline-block; color: #111111; border-radius: var(--sf-round); background: var(--sf-highlight) }
.pe-cat-link.pe-cat-link-1 { background: var(--sf-highlight); border-radius: var(--sf-round); padding: var(--sf-u-2) var(--sf-u-8) var(--sf-u-2) var(--sf-u-8); display: inline-block; color: #111111 }
.pe-navigation .pe-cat-link.pe-cat-link-1 { font-weight: 600; text-decoration: none }
.pe-colophon .pe-cat-link.pe-cat-link-1 { text-decoration: none; font-weight: 600 }
.pe-cat-link.pe-cat-link-1 { text-decoration: none; font-weight: 600 }
.pe-navigation .pe-cat-link.pe-cat-link-2 { padding-block: 0.125rem; padding-inline: 0.563rem }
.pe-colophon .pe-cat-link.pe-cat-link-2 { padding-block: 0.125rem; padding-inline: 0.563rem }
.pe-cat-link.pe-cat-link-2 { padding-block: 0.125rem; padding-inline: 0.563rem }
.pe-navigation .pe-cat-link.pe-cat-link-2 { text-decoration: none; color: #ffffff; display: inline-block }
.pe-colophon .pe-cat-link.pe-cat-link-2 { color: #ffffff; display: inline-block; text-decoration: none }
.pe-cat-link.pe-cat-link-2 { display: inline-block; color: #ffffff; text-decoration: none }
.pe-navigation .pe-cat-link.pe-cat-link-2 { font-weight: 600; border: 0.094rem solid var(--sf-highlight); border-radius: 0.563rem }
.pe-colophon .pe-cat-link.pe-cat-link-2 { border: 0.094rem solid var(--sf-highlight); font-weight: 600; border-radius: 0.563rem }
.pe-cat-link.pe-cat-link-2 { font-weight: 600; border: 0.094rem solid var(--sf-highlight); border-radius: 0.563rem }
.pe-navigation .pe-cat-link.pe-cat-link-3 { text-decoration: underline; color: #ffffff }
.pe-colophon .pe-cat-link.pe-cat-link-3 { text-decoration: underline; color: #ffffff }
.pe-cat-link.pe-cat-link-3 { text-decoration: underline; color: #ffffff }
.pe-navigation .pe-cat-link.pe-cat-link-3 { text-underline-offset: 0.188rem; text-decoration-thickness: 0.125rem }
.pe-colophon .pe-cat-link.pe-cat-link-3 { text-underline-offset: 0.188rem; text-decoration-thickness: 0.125rem }
.pe-cat-link.pe-cat-link-3 { text-underline-offset: 0.188rem; text-decoration-thickness: 0.125rem }
.pe-navigation .pe-cat-link.pe-cat-link-4 { font-weight: 600; color: #ffffff }
.pe-colophon .pe-cat-link.pe-cat-link-4 { color: #ffffff; font-weight: 600 }
.pe-cat-link.pe-cat-link-4 { color: #ffffff; font-weight: 600 }
.pe-navigation .pe-cat-link.pe-cat-link-4::before { content: "→"; margin-right: .37em; color: #ffffff }
.pe-colophon .pe-cat-link.pe-cat-link-4::before { margin-right: .37em; content: "→"; color: #ffffff }
.pe-cat-link.pe-cat-link-4::before { content: "→"; color: #ffffff; margin-right: .37em }
.pe-navigation .pe-cat-link.pe-cat-link-0,.pe-colophon .pe-cat-link.pe-cat-link-0,.pe-cat-link.pe-cat-link-0:hover,.pe-navigation .pe-cat-link.pe-cat-link-1,.pe-colophon .pe-cat-link.pe-cat-link-1,.pe-cat-link.pe-cat-link-1:hover,.pe-navigation .pe-cat-link.pe-cat-link-2,.pe-colophon .pe-cat-link.pe-cat-link-2,.pe-cat-link.pe-cat-link-2:hover,.pe-navigation .pe-cat-link.pe-cat-link-3,.pe-colophon .pe-cat-link.pe-cat-link-3,.pe-cat-link.pe-cat-link-3:hover,.pe-navigation .pe-cat-link.pe-cat-link-4,.pe-colophon .pe-cat-link.pe-cat-link-4,.pe-cat-link.pe-cat-link-4:hover { opacity: 1 }
.pe-menu-check { display: none }
.pe-nav-open { align-items: center; outline: 0.063rem solid currentColor; cursor: pointer; display: none; padding-inline: 0.625rem; border-radius: 0.375rem; text-transform: uppercase; font: inherit; letter-spacing: .06em; padding-block: 0.313rem }
.pe-nav-open { outline-offset: -1px; font-size: .85em }
.pe-post-meta { margin: 0 0 var(--sf-u-18); color: var(--sf-text-2); font-size: .9em }
.pe-post-meta { flex-wrap: wrap; gap: 0.563rem var(--sf-u-16); display: flex }
.pe-crumbs { margin-block-end: var(--sf-u-14); font-size: .88em; color: var(--sf-text-2) }
.pe-crumbs a { text-decoration: none; color: var(--sf-text-2) }
.pe-labela { text-transform: uppercase; letter-spacing: .08em; display: inline-block }
.pe-labela { color: var(--sf-highlight); margin: 0 0 0.563rem; font-size: .76em; font-weight: 700 }
.pe-figure figcaption { font-size: .85em; color: var(--sf-text-2); margin: var(--sf-u-8) 0 0 }
.pe-instructions .pe-figure { margin: var(--sf-u-14) 0 var(--sf-u-6) }
.pe-text-body .pe-figure { margin: var(--sf-u-14) 0 var(--sf-u-6) }
.pe-instructions .pe-figure img { border-radius: 0.375rem; inline-size: 100% }
.pe-related { margin-top: 2.938rem }
ul.pe-post-meta { list-style: none; padding: 0 }
.pe-crumbs ol { margin: 0rem; flex-wrap: wrap; gap: var(--sf-u-6); display: flex }
.pe-crumbs ol { list-style: none; padding: 0 }
.pe-crumbs li+li::before { opacity: .7; margin: 0 var(--sf-u-6) 0 0; content: "»" }
.pe-related ul { list-style: none; padding: 0 }
.pe-related li>a { font-weight: 600; display: block; text-decoration: none }
.pe-related li>span { display: block; color: var(--sf-text-2); font-size: .92em }
.pe-labela { display: block; margin: var(--sf-u-8) 0 0 }
.pe-text-body .pe-task { color: var(--sf-highlight); margin-right: var(--sf-u-4) }
.pe-q-and-a { gap: 1.063rem; display: grid; grid-template-columns: repeat(auto-fill,minmax(17.5rem,1fr)) }
.pe-q-and-a>div { outline: 0.063rem solid rgb(48 57 64); background: var(--sf-panel) }
.pe-q-and-a>div { outline-offset: -1px; padding: 1.063rem 1.063rem 1.063rem 1.063rem; border-radius: var(--sf-round) }
.pe-q-and-a h3 { font-size: 1.02em; margin: 0 0 var(--sf-u-8) }
.pe-instructions { margin-block-end: var(--sf-u-20) }
.pe-instructions { counter-reset: s; list-style: none; padding: 0; margin-top: var(--sf-u-20) }
.pe-instructions li { padding-left: 3.375rem; position: relative; margin: var(--sf-u-20) 0 }
.pe-instructions li::before { width: 2.375rem; left: 0; counter-increment: s; top: 0; height: 2.375rem; position: absolute; content: counter(s) }
.pe-instructions li::before { align-items: center; font-weight: 700; background: var(--sf-link); font-family: var(--sf-heading-font); justify-content: center; border-radius: 50%; display: flex; color: #111111 }
.pe-table-scroll { max-width: 100%; overflow-x: auto }
p,li,dd,td,blockquote,figcaption { overflow-wrap: anywhere }
.pe-shell { max-width: 73.75rem; padding: 0 1.313rem 0 1.313rem; margin: 0 auto 0 auto }
.pe-masthead { border-block-end: 0.063rem solid var(--sf-rule); position: sticky; backdrop-filter: blur(0.5rem); background: linear-gradient(var(--sf-page), var(--sf-panel)) }
.pe-masthead { z-index: 20; top: 0 }
.pe-nav-row { justify-content: space-between; align-items: center; display: flex }
.pe-nav-row { gap: 1.313rem; flex-wrap: wrap; min-block-size: 3.75rem }
.pe-wordmark { font-size: 1.1rem; font-weight: 600; gap: var(--sf-u-10); text-decoration: none; font-family: var(--sf-heading-font); letter-spacing: .02em; align-items: center; color: var(--sf-text); display: inline-flex }
.pe-wordmark svg { inline-size: 1.625rem; block-size: 1.625rem }
.pe-navigation { display: flex; gap: var(--sf-u-4) }
.pe-navigation a { padding-block: 0.375rem; border-radius: 0.563rem; padding-inline: 0.75rem; color: var(--sf-text-2); text-decoration-line: none }
.pe-navigation a { font-size: .9em; font-family: var(--sf-heading-font) }
.pe-navigation a:hover { color: var(--sf-text); background: var(--sf-wash) }
.pe-cover { border-block-end: 0.063rem solid var(--sf-rule); background: var(--sf-hero-bg); padding: 4.688rem 0 2.813rem }
.pe-cover h1 { margin: var(--sf-u-6) 0 var(--sf-u-14); font-size: 2.9rem; max-width: 51.25rem }
.pe-cover p { color: var(--sf-text-2); max-inline-size: 42.5rem; font-size: 1.15em }
.pe-labela { font-family: var(--sf-heading-font) }
.pe-content { padding: 2.313rem 0 4.625rem }
.pe-page-head h1 { max-width: 56.25rem; font-size: 2.4rem }
.pe-tagline { margin-bottom: 0.813rem; color: var(--sf-text-2); font-size: 1.1em }
.pe-figure { margin: 0.438rem 0 1.938rem }
.pe-figure img { inline-size: 100% }
.pe-figure img { box-shadow: 0 0 0 0.063rem var(--sf-rule), 0 1.25rem 3.75rem rgba(0,0,0,.45); border: 0.063rem solid var(--sf-rule); border-radius: 0.563rem }
.pe-with-sidebar { grid-template-columns: minmax(0,1fr) 16.25rem; display: grid }
.pe-with-sidebar { align-items: start; gap: 2.75rem }
.pe-rail { position: sticky; inset-block-start: 5rem }
.pe-jump-links strong { font-family: var(--sf-heading-font); font-size: .76em; text-transform: uppercase }
.pe-jump-links summary { font-size: .76em; text-transform: uppercase; font-family: var(--sf-heading-font) }
.pe-jump-links strong { letter-spacing: .08em; color: var(--sf-highlight) }
.pe-jump-links summary { letter-spacing: .08em; color: var(--sf-highlight) }
.pe-jump-links ul { border-left: 0.063rem solid var(--sf-rule); padding: 0; margin: var(--sf-u-10) 0 0; list-style: none }
.pe-jump-links ol { margin: var(--sf-u-10) 0 0; list-style: none; padding: 0; border-left: 0.063rem solid var(--sf-rule) }
.pe-jump-links a { padding: 0.313rem var(--sf-u-14) 0.313rem var(--sf-u-14); text-decoration-line: none }
.pe-jump-links a { font-size: .9em; color: var(--sf-text-2) }
.pe-jump-links a { border-inline-start: 0.125rem solid transparent; margin-inline-start: -1px; display: block }
.pe-article>.pe-jump-links { outline: 0.063rem solid rgb(48 57 64); border-radius: var(--sf-round); background: var(--sf-panel); outline-offset: -1px }
.pe-article>.pe-jump-links { margin-bottom: 1.625rem; padding: var(--sf-u-14) 1.063rem var(--sf-u-14) 1.063rem }
.pe-article>.pe-jump-links a { margin: 0; border: 0; display: inline; padding: 0; color: var(--sf-text) }
.pe-article>.pe-jump-links ul { padding-inline-start: 1.21em; list-style: decimal; border: 0 }
.pe-article>.pe-jump-links ol { list-style: decimal; padding-inline-start: 1.21em; border: 0 }
.pe-jump-links a:hover { color: var(--sf-link); border-color: var(--sf-link) }
.pe-listing .pe-tile { text-decoration: none; color: inherit; background: var(--sf-panel) }
.pe-listing .pe-tile { outline: 0.063rem solid rgb(48 57 64); transition: border-color .15s; outline-offset: -1px }
.pe-listing .pe-tile:hover { border-color: var(--sf-link) }
.pe-text-body pre,.pe-text-body code { font-family: var(--sf-heading-font) }
.pe-colophon { border-top: 0.063rem solid var(--sf-rule); padding: var(--sf-u-40) 0 0 }
.pe-colophon { font-size: .9em; color: var(--sf-text-2) }
.pe-bottom-inner { display: flex; flex-wrap: wrap; padding-bottom: 1.438rem }
.pe-bottom-inner { gap: var(--sf-u-24); justify-content: space-between }
.pe-bottom-inner nav a { color: var(--sf-text-2); margin-inline-start: 1.188rem; text-decoration: none }
.pe-small-print { padding-inline: 1.375rem; border-block-start: 0.063rem solid var(--sf-rule); padding-block: 0.813rem }
.pe-small-print { font-family: var(--sf-heading-font); font-size: .8em }
.pe-jump-links ul { margin: 0; padding-inline-start: 1.11em }
.pe-footer-inner { max-width: 73.75rem; margin: 0 auto; padding: 0 1.313rem }
.pe-hero-grid { gap: 1.875rem; align-items: center; text-align: start }
.pe-hero-grid { display: flex; justify-content: space-between; flex-wrap: wrap }
.pe-hero-grid > div:not(.pe-artwork) { flex: 1 1 19.938rem }
.pe-artwork { width: 12.25rem; max-width: 100% }
.pe-artwork { margin: 0 0 0 auto; flex-shrink: 0 }
.pe-artwork > * { display: block; height: auto; width: 100% }
.pe-sponsor-unit { justify-content: flex-start; inline-size: 100%; max-inline-size: 100vw; display: flex }
.pe-sponsor-unit { margin: 0; padding: 0.813rem var(--sf-u-8) 0.813rem var(--sf-u-8); background: transparent; box-sizing: border-box; min-inline-size: 0 }
.pe-sponsor-content { box-sizing: border-box; display: grid; width: 100% }
.pe-sponsor-content { gap: var(--sf-u-4); max-inline-size: 100%; align-items: center; min-inline-size: 0 }
.pe-sponsor-content.pe-sponsor-side { flex-direction: row; gap: 0.438rem }
.pe-sponsor-content.pe-sponsor-side { inline-size: 100%; align-items: center; min-inline-size: 0 }
.pe-sponsor-link { display: block; width: min(29.25rem, 100%); max-width: 100%; flex: 0 1 auto }
.pe-sponsor-link { flex-basis: auto; min-width: 0 }
.pe-sponsor-image { min-width: 0; width: min(29.25rem, 100%); max-width: 100%; display: block; height: auto }
.pe-sponsor-label { font-size: .72rem; color: inherit; opacity: .75; line-height: 1.2 }
.pe-sponsor-side .pe-sponsor-label { white-space: nowrap }
.pe-sponsor-side .pe-sponsor-link { width: min(29.25rem, 100%); flex: 0 1 auto }
.pe-sponsor-side .pe-sponsor-link { min-width: 0; flex-basis: auto }
pre { background: var(--sf-panel); color: var(--sf-text) }
pre { padding-inline: 1.25rem; overflow: auto; font-size: .9em; line-height: 1.5; padding-block: 0.938rem; border-radius: 0.688rem; margin-block-start: 1.17em; margin-block-end: 1.17em }
pre code { color: inherit }
pre code { border-radius: 0; padding: 0 }
pre code { background: transparent; font-size: inherit }
hr,.pe-separator { border: 0; margin: 1.625rem 0 1.625rem 0; background: var(--sf-rule); block-size: 0.125rem }
.pe-lead { font-size: 1.18em; line-height: 1.55; color: var(--sf-text) }
.pe-profile-pic { inline-size: 2.5rem }
.pe-profile-pic { height: 2.5rem; background: var(--sf-wash) }
.pe-profile-pic { border-radius: 50%; object-fit: cover }
.pe-byline { display: flex; align-items: center; gap: 0.688rem }
.pe-byline { color: var(--sf-text-2); font-size: .9em }
:focus-visible { outline: 0.125rem solid var(--sf-link); outline-offset: 0.063rem }
:focus:not(:focus-visible) { outline: none }
a:focus-visible { border-radius: 0.125rem }
.pe-subscribe { background: var(--sf-wash); display: flex }
.pe-subscribe { border-radius: 0.563rem; padding: 1.063rem; margin: 2.188rem 0 2.188rem 0; gap: var(--sf-u-10) }
.pe-subscribe input { flex: 1 1 12.5rem }
.pe-subscribe small { flex: 1 0 100%; color: var(--sf-text-2) }
kbd { font-size: .85em; border-radius: 0.25rem }
kbd { padding: var(--sf-u-2) var(--sf-u-6) var(--sf-u-2) var(--sf-u-6); background: var(--sf-panel); font: inherit }
kbd { border: 0.063rem solid var(--sf-rule); border-block-end-width: 0.125rem }
mark { color: inherit; background: rgb(222 103 228 / 0.35) }
mark { padding-block: 0; padding-inline: 0.188rem; border-radius: 0.125rem }
abbr[title] { cursor: help; text-decoration: underline dotted }
dialog { max-width: min(35rem,92vw); border: 0; padding: 1.563rem; background: var(--sf-panel); color: var(--sf-text) }
dialog { box-shadow: 0 1.875rem 5rem rgb(232 235 237 / 0.3); border-radius: var(--sf-round) }
dialog::backdrop { background: rgb(232 235 237 / 0.5) }
.pe-lightbox { position: fixed; place-items: center; z-index: 80 }
.pe-lightbox { display: grid; inset: 0 }
.pe-table-scroll { -webkit-overflow-scrolling: touch; overflow-x: auto; margin: 1.13em 0 }
.pe-table-scroll table { margin: 0; display: table; min-width: 32.5rem }
.pe-mt-1 { margin-top: 0.563rem }
.pe-mt-2 { margin-top: 0.938rem }
.pe-mt-3 { margin-block-start: 1.563rem }
.pe-mt-4 { margin-block-start: 2.625rem }
.pe-callout { border: 0.063rem solid var(--sf-rule); padding: var(--sf-u-12) 1.063rem var(--sf-u-12) 1.063rem; margin-block-end: 1.188rem; margin-block-start: 1.188rem }
.pe-callout { background: var(--sf-panel); border-radius: 0.688rem; border-inline-start-width: 0.25rem }
.pe-callout.pe-alert-info { border-left-color: var(--sf-link) }
.pe-callout.pe-alert-warn { border-left-color: rgb(218 142 11) }
.pe-callout.pe-alert-ok { border-left-color: rgb(39 155 87) }
.pe-callout p:last-child { margin: 0 }
tbody tr:nth-child(even) { background: rgb(36 44 50 / 0.6) }
caption { text-align: start }
caption { padding: 0.438rem 0; color: var(--sf-text-2) }
caption { font-size: .88em; caption-side: bottom }
.pe-initial::first-letter { line-height: .8; font-family: var(--sf-heading-font); font-size: 2.9em; float: left; color: var(--sf-highlight); font-weight: 700; padding: var(--sf-u-6) 0.563rem 0 0 }
.pe-sticky { position: sticky; backdrop-filter: saturate(1.4) blur(0.5rem); top: 0 }
.pe-sticky { z-index: 40; box-shadow: 0 0.125rem 0.625rem rgb(232 235 237 / 0.08) }
summary { cursor: pointer; list-style: none }
summary::-webkit-details-marker { display: none }
summary::after { content: "+"; transition: transform .2s; float: right; color: var(--sf-text-2) }
details[open] summary::after { transform: rotate(45deg) }
details[open] summary { margin-block-end: var(--sf-u-6) }
.pe-notification { transform: translateX(-50%); inset-inline-start: 50% }
.pe-notification { padding: 0.813rem var(--sf-u-18) 0.813rem var(--sf-u-18); position: fixed; border-radius: 0.563rem; font-size: .92em; background: var(--sf-text); box-shadow: 0 0.625rem 1.875rem rgb(232 235 237 / 0.25) }
.pe-notification { z-index: 90; color: var(--sf-page); inset-block-end: 1rem }
.pe-crumbs ol { list-style: none; flex-wrap: wrap }
.pe-crumbs ol { margin: 0; display: flex }
.pe-crumbs ol { gap: var(--sf-u-4) var(--sf-u-8); padding: 0 }
.pe-crumbs li+li::before { margin-right: 0.438rem; opacity: .5; content: "/" }
.pe-content-frame { inline-size: min(73.75rem, calc(100% - 2.5rem)); margin-inline: auto; margin-block: 0 }
.pe-top-region { position: relative; z-index: 20 }
.pe-top-region { border-block-end: 0.063rem solid var(--sf-rule); color: var(--sf-text); background: var(--sf-page) }
.pe-top-region .pe-content-frame { display: flex; justify-content: space-between; align-items: center }
.pe-top-region .pe-content-frame { gap: 1.188rem; min-block-size: 4.625rem }
.pe-wordmark-block { color: inherit; font-family: var(--sf-heading-font); gap: 0.688rem; display: inline-flex; align-items: center }
.pe-wordmark-block { font-weight: 600; text-decoration-line: none; font-size: 1.2rem }
.pe-wordmark-block svg { height: 2rem; width: 2rem }
.pe-menu-area a { color: inherit; text-decoration: none; font-weight: 600; padding: 0.563rem 0.938rem 0.563rem 0.938rem; border-radius: 0.875rem; outline: 0.063rem solid rgb(48 57 64); outline-offset: -1px }
.pe-lead-banner { color: var(--sf-hero-text) }
.pe-lead-banner { background: linear-gradient(135deg, var(--sf-hero-bg), var(--sf-page) 68%, var(--sf-link-hover)); overflow: hidden; position: relative; text-align: center; padding: 5.5rem 0 6.438rem }
.pe-lead-banner h1 { max-width: 56.25rem; line-height: 1.05; letter-spacing: -.035em }
.pe-lead-banner h1 { margin: 0 auto var(--sf-u-16); font-family: var(--sf-heading-font); font-size: clamp(2.4rem, 6vw, 4.8rem); text-transform: none }
.pe-lead-banner p { margin: 0 auto 1.688rem; max-width: 45rem }
.pe-lead-banner p { color: var(--sf-hero-text); font-size: clamp(1.05rem, 2vw, 1.25rem) }
.pe-choice-links { display: flex; justify-content: center }
.pe-choice-links { flex-wrap: wrap; gap: var(--sf-u-12) }
.pe-link-control { font-weight: 700; padding-block: 0.75rem; justify-content: center; display: inline-flex; padding-inline: 1.063rem; text-decoration: none; border: 0.063rem solid var(--sf-link); background: var(--sf-link); align-items: center; color: var(--sf-hero-text) }
.pe-link-control { box-shadow: none; border-radius: 1rem }
.pe-primary-content { color: var(--sf-text); background: var(--sf-page) }
.pe-page-segment { border-bottom: 0.063rem solid var(--sf-rule); padding: 3.625rem 0 }
.pe-page-segment h2 { margin-bottom: var(--sf-u-24); font-size: clamp(1.7rem, 3.4vw, 2.5rem) }
.pe-page-segment h2 { line-height: 1.15; font-family: var(--sf-heading-font) }
.pe-editorial-text { line-height: 1.8; font-size: 1.08rem; max-width: 51.25rem; color: var(--sf-text) }
.pe-editorial-text h2 { font-family: var(--sf-heading-font) }
.pe-editorial-text h3 { font-family: var(--sf-heading-font) }
.pe-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.875rem), 1fr)); gap: 1.563rem }
.pe-service-panel { color: var(--sf-text); overflow: hidden; min-width: 0; background: var(--sf-panel); outline: 0.063rem solid rgb(48 57 64) }
.pe-service-panel { outline-offset: -1px; border-radius: 0.875rem }
.pe-service-panel img { object-fit: cover; display: block; width: 100%; background: var(--sf-wash); aspect-ratio: 16 / 9 }
.pe-tile-copy { padding: var(--sf-u-24) }
.pe-tile-copy { gap: 0.813rem; flex-direction: column }
.pe-tile-copy { display: flex; align-items: flex-start }
.pe-tile-copy h3 { line-height: 1.25 }
.pe-tile-copy h3 { margin: 0rem; font-family: var(--sf-heading-font); font-size: 1.25rem }
.pe-tile-copy h3 a { color: inherit; text-decoration: none }
.pe-tile-copy p { color: var(--sf-text-2); margin: 0; line-height: 1.6 }
.pe-tile-copy time { color: var(--sf-text-2); font-size: .84rem }
.pe-tile-copy code { color: var(--sf-link); font-size: .86rem }
.pe-tile-copy code { overflow-wrap: anywhere; max-inline-size: 100% }
.pe-tile-copy .pe-link-control { margin-top: auto }
.pe-additional-reading { color: var(--sf-link); font-weight: 700 }
.pe-additional-reading { text-underline-offset: 0.25rem; text-decoration: underline }
.pe-video-stage { outline: 0.063rem solid rgb(48 57 64); margin: 0 auto 1.313rem; background: var(--sf-panel); outline-offset: -1px }
.pe-video-stage { max-width: 51.25rem; border-radius: 1rem; overflow: hidden }
.pe-video-stage video { inline-size: 100%; display: block }
.pe-video-stage video { max-block-size: 38.125rem; background: var(--sf-text) }
.pe-community-link .pe-link-control { display: flex; width: fit-content; margin: 0 auto }
.pe-question-stack { display: grid; max-inline-size: 56.25rem; gap: var(--sf-u-12) }
.pe-query-block { border: 0.063rem solid var(--sf-rule); padding-block: 1rem; background: var(--sf-panel) }
.pe-query-block { padding-inline: 1.375rem; border-radius: 0.938rem }
.pe-query-block summary { cursor: pointer; font-family: var(--sf-heading-font); font-weight: 700 }
.pe-query-block div { color: var(--sf-text-2); padding: 0.813rem 0 0; line-height: 1.7 }
.pe-brand-ad { overflow: hidden; box-sizing: border-box; width: 100% }
.pe-bottom-area { padding: var(--sf-u-40) 0 1.563rem; color: var(--sf-page); background: var(--sf-text) }
.pe-bottom-area nav { gap: var(--sf-u-12) 1.375rem; flex-wrap: wrap; display: flex }
.pe-bottom-area nav { margin: 0 0 1.188rem; justify-content: center }
.pe-bottom-area a { color: var(--sf-page); text-decoration: none }
.pe-bottom-area p { font-size: .85rem; opacity: .75; text-align: center; margin: 0 }
.pe-lead-banner .pe-content-frame { width: min(73.75rem, calc(100% - 2.5rem)) }
.pe-brand-ad .pe-sponsor-unit { margin: 0 auto; maxWidth: 67.313rem }
.pe-brand-ad .pe-sponsor-image { block-size: auto }
.pe-overview-block .pe-content-frame { align-items: start }
.pe-overview-block .pe-content-frame { gap: var(--sf-u-24); display: grid; grid-template-columns: minmax(10rem, .55fr) minmax(0, 1.45fr) }
.pe-overview-block h2 { margin: 0rem }
.pe-overview-block .pe-editorial-text :first-child { marginTop: 0 }
.pe-lead-banner .pe-choice-links .pe-link-control { color: var(--sf-text); background: var(--sf-page) }
.pe-bottom-area .pe-wordmark-block { color: var(--sf-page) }
.pe-bottom-area .pe-wordmark-block svg { fill: var(--sf-page) }
.pe-lead-banner h1 { text-shadow: 0 0.5rem 2.25rem var(--sf-link-hover) }
.pe-service-panel { box-shadow: 0 0.75rem 2.25rem var(--sf-link-hover) }
.pe-nf { padding: 0.938rem 0 2.438rem }
body > .pe-info-bar { position: relative; z-index: 40 }
@media (max-width:39.38rem){h1 { overflow-wrap: anywhere } h2 { overflow-wrap: anywhere } h3 { overflow-wrap: anywhere } .pe-cards { grid-template-columns: 1fr } .pe-cards.pe-cards-v2 > .pe-tile { display: block } .pe-cards.pe-cards-v4 > .pe-tile { display: block } .pe-cards.pe-cards-v2 > .pe-tile .pe-card-media,.pe-cards.pe-cards-v4 > .pe-tile .pe-card-media { width: 100%; height: auto; aspect-ratio: 16 / 9 } .pe-plus-minus { grid-template-columns: minmax(0,1fr) } .pe-cover h1 { font-size: 1.9rem } .pe-page-head h1 { font-size: 1.9rem }}
@media (max-width:44.44rem){table { overflow-x: auto; display: block; max-width: 100% } .pe-artwork { width: min(10.125rem, 60vw); margin: 0 auto 0.813rem }}
@media (max-width:56.69rem){.pe-with-sidebar { grid-template-columns: minmax(0,1fr) } .pe-rail { display: none }}
@media (max-width:47.19rem){.pe-nav-open { display: flex } .pe-navigation { width: 100%; padding: var(--sf-u-6) 0 var(--sf-u-12) } .pe-navigation { flex-direction: column; display: none } .pe-menu-check:checked~.pe-navigation { display: flex }}
@media (max-width:33.94rem){.pe-sponsor-content.pe-sponsor-side { flex-direction: column } .pe-sponsor-link { flex-basis: auto }}
@media print{header { display: none } footer { display: none } nav { display: none } aside { display: none } body { background: #fff; color: #000; font-size: 10.5pt } a { color: #000; text-decoration: none } .pe-promo,.pe-btn { display: none } h2 { break-after: avoid } h3 { break-after: avoid } img,table,pre { break-inside: avoid }}
@media (max-width:35rem){.pe-brand-ad .pe-sponsor-unit { padding: 0.438rem 0.688rem 0.438rem 0.688rem }}
@media (max-width:47.19rem){.pe-overview-block .pe-content-frame { grid-template-columns: minmax(0, 1fr); gap: 0.813rem }}
@media (max-width:39.38rem){.pe-lead-banner { padding: 3.188rem 0 3.563rem } .pe-page-segment { padding: 2.563rem 0 2.563rem 0 }}
@media (max-width:30.88rem){.pe-content-frame { width: calc(100% - 1.875rem) } .pe-top-region .pe-content-frame { min-height: 4rem; gap: 0.563rem } .pe-menu-area a { padding: var(--sf-u-8) var(--sf-u-10) var(--sf-u-8) var(--sf-u-10) } .pe-tile-copy { padding: 1.188rem }}