@font-face {
font-family: "Space Grotesk Variable";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Space Grotesk Variable";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/fonts/space-grotesk-vietnamese.woff2") format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "IBM Plex Sans Variable";
font-style: normal;
font-weight: 100 700;
font-display: swap;
src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Variable";
font-style: normal;
font-weight: 100 700;
font-display: swap;
src: url("/fonts/ibm-plex-sans-vietnamese.woff2") format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Space Grotesk Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
ascent-override: 80.9%;
descent-override: 24.01%;
line-gap-override: 0%;
size-adjust: 121.64%;
}
@font-face {
font-family: "IBM Plex Sans Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
ascent-override: 92.62%;
descent-override: 24.85%;
line-gap-override: 0%;
size-adjust: 110.66%;
}
:root {
--brand-font-display: "Space Grotesk Variable", "Space Grotesk Fallback", system-ui, sans-serif;
--brand-font-body: "IBM Plex Sans Variable", "IBM Plex Sans Fallback", system-ui, sans-serif;
}
.brand-wordmark {
font-family: var(--brand-font-display);
letter-spacing: -0.01em;
line-height: 1.1;
white-space: nowrap;
}
:root {
--b-paper: #f5f8fb;
--b-sheet: #ffffff;
--b-shoal: #e4f2ff;
--b-ink: #11304d;
--b-body: #3a4856;
--b-muted: #5a6672;
--b-rule: #d3dce5;
--b-navy: #26436e;
--b-steel: #2e69a6;
--b-course: #a61e70;
--b-action: #26436e;
--b-action-hover: #11304d;
--b-on-action: #ffffff;
--b-code-bg: #eef3f8;
--b-mark-x: #000000;
color-scheme: light;
}
:root.dark {
--b-paper: #0a121b;
--b-sheet: #121a23;
--b-shoal: #10263c;
--b-ink: #f2f6fa;
--b-body: #c3ccd6;
--b-muted: #98a5b2;
--b-rule: #2a3540;
--b-navy: #cbe4ff;
--b-steel: #80afe1;
--b-course: #ff8fcc;
--b-action: #cbe4ff;
--b-action-hover: #ffffff;
--b-on-action: #0e2a47;
--b-code-bg: #16212d;
--b-mark-x: #ffffff;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not(.light) {
--b-paper: #0a121b;
--b-sheet: #121a23;
--b-shoal: #10263c;
--b-ink: #f2f6fa;
--b-body: #c3ccd6;
--b-muted: #98a5b2;
--b-rule: #2a3540;
--b-navy: #cbe4ff;
--b-steel: #80afe1;
--b-course: #ff8fcc;
--b-action: #cbe4ff;
--b-action-hover: #ffffff;
--b-on-action: #0e2a47;
--b-code-bg: #16212d;
--b-mark-x: #ffffff;
color-scheme: dark;
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
background: var(--b-paper);
color: var(--b-body);
font-family: var(--brand-font-body);
font-size: 1.0625rem;
line-height: 1.65;
margin: 0;
min-height: 100vh;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
}
img { height: auto; max-width: 100%; }
a { color: inherit; }
::selection { background: rgb(58 118 179 / 0.28); }
:focus-visible { border-radius: 4px; outline: 3px solid var(--b-steel); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.b-on-dark { display: none; }
:root.dark .b-on-light { display: none; }
:root.dark .b-on-dark { display: inline; }
@media (prefers-color-scheme: dark) {
:root:not(.light) .b-on-light { display: none; }
:root:not(.light) .b-on-dark { display: inline; }
}
.b-wrap { margin-inline: auto; max-width: 74rem; padding-inline: clamp(1rem, 4.5vw, 2.5rem); }
.b-skip {
background: var(--b-action);
border-radius: 0 0 6px 6px;
color: var(--b-on-action);
font-weight: 600;
left: 1rem;
padding: 0.6rem 1rem;
position: absolute;
text-decoration: none;
top: 0;
transform: translateY(-120%);
z-index: 60;
}
.b-skip:focus { transform: none; }
.b-h1, .b-h2, .b-prose h2, .b-prose h3, .b-card-title, .b-cta-title {
color: var(--b-ink);
font-family: var(--brand-font-display);
font-weight: 600;
text-wrap: balance;
}
.b-h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); letter-spacing: -0.028em; line-height: 1.1; margin: 0.25rem 0 0; }
.b-h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 1.25rem; }
.b-lead { color: var(--b-body); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; margin: 1rem 0 0; max-width: 42em; }
.b-small { color: var(--b-muted); font-size: 0.9375rem; line-height: 1.5; }
.b-meta { color: var(--b-muted); font-size: 0.9375rem; margin: 1rem 0 0; }
.b-kicker { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; margin: 0; text-transform: uppercase; }
.b-kicker a { color: var(--b-steel); text-decoration: none; }
.b-kicker a:hover { text-decoration: underline; }
.b-link { color: var(--b-navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.b-link:hover { text-decoration-thickness: 2px; }
.b-btn {
align-items: center;
background: var(--b-action);
border: 1px solid var(--b-action);
border-radius: 6px;
color: var(--b-on-action);
display: inline-flex;
font-size: 1rem;
font-weight: 600;
justify-content: center;
line-height: 1.25;
min-height: 3rem;
padding: 0.75rem 1.375rem;
text-align: center;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.b-btn:hover { background: var(--b-action-hover); border-color: var(--b-action-hover); }
.b-btn--quiet { background: transparent; color: var(--b-navy); min-height: 2.5rem; padding: 0.4rem 1rem; }
.b-btn--quiet:hover { background: var(--b-action); color: var(--b-on-action); }
.b-header {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: color-mix(in srgb, var(--b-paper) 94%, transparent);
border-bottom: 1px solid var(--b-rule);
position: sticky;
top: 0;
z-index: 50;
}
.b-header-row { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; min-height: 4rem; }
.b-logo { display: inline-flex; }
.b-logo img { display: block; height: 1.75rem; width: auto; }
.b-logo img.b-on-dark { display: none; }
:root.dark .b-logo img.b-on-light { display: none; }
:root.dark .b-logo img.b-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
:root:not(.light) .b-logo img.b-on-light { display: none; }
:root:not(.light) .b-logo img.b-on-dark { display: block; }
}
.b-nav { display: flex; font-size: 0.9375rem; gap: 1.25rem; margin-left: auto; white-space: nowrap; }
.b-nav a { color: var(--b-body); padding-block: 0.5rem; text-decoration: none; }
.b-nav a:hover, .b-nav a[aria-current="page"] { color: var(--b-ink); text-decoration: underline; text-underline-offset: 0.3em; }
.b-nav .b-wide { display: none; }
.b-tools { align-items: center; display: flex; gap: 0.5rem; }
.b-seg { background: var(--b-sheet); border: 1px solid var(--b-rule); border-radius: 6px; display: none; gap: 2px; padding: 2px; }
.b-seg button { align-items: center; background: none; border: 0; border-radius: 4px; color: var(--b-muted); cursor: pointer; display: inline-flex; height: 1.875rem; justify-content: center; padding: 0; width: 1.875rem; }
.b-seg button:hover { color: var(--b-ink); }
.b-seg button[aria-pressed="true"] { background: var(--b-action); color: var(--b-on-action); }
.b-seg[hidden] { display: none !important; }
@media (min-width: 30rem) { .b-seg { display: inline-flex; } }
@media (min-width: 48rem) { .b-nav .b-wide { display: inline; } }
@media (max-width: 22.5rem) { .b-logo img { height: 1.5rem; } .b-nav { gap: 0.75rem; } }
.b-crumbs { font-size: 0.875rem; padding-top: 1.5rem; }
.b-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.b-crumbs li { color: var(--b-muted); }
.b-crumbs li + li::before { color: var(--b-rule); content: "/"; margin-right: 0.5rem; }
.b-crumbs a { color: var(--b-muted); }
.b-crumbs a:hover { color: var(--b-ink); }
.b-crumbs [aria-current] { color: var(--b-body); }
.b-list-head { padding-block: clamp(1.5rem, 4vw, 3rem) 1.5rem; }
.b-topics { border-bottom: 1px solid var(--b-rule); margin-bottom: 2rem; }
.b-topics ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0 0 1.25rem; }
.b-topics a { background: var(--b-sheet); border: 1px solid var(--b-rule); border-radius: 999px; color: var(--b-body); display: inline-block; font-size: 0.9375rem; padding: 0.375rem 0.875rem; text-decoration: none; }
.b-topics a:hover { border-color: var(--b-muted); color: var(--b-ink); }
.b-topics a[aria-current="page"] { background: var(--b-action); border-color: var(--b-action); color: var(--b-on-action); }
.b-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.b-card { background: var(--b-sheet); border: 1px solid var(--b-rule); border-radius: 12px; display: flex; flex-direction: column; padding: 1.25rem 1.375rem; position: relative; }
.b-card:hover { border-color: var(--b-steel); }
.b-card-img { aspect-ratio: 16 / 10; border: 1px solid var(--b-rule); border-radius: 8px; display: block; margin-bottom: 1rem; object-fit: cover; width: 100%; }
.b-card-title { font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.3; margin: 0.5rem 0 0; }
.b-card-title a { text-decoration: none; }
.b-card-title a::after { content: ""; inset: 0; position: absolute; }
.b-card-title a:hover { text-decoration: underline; }
.b-card .b-kicker { position: relative; z-index: 1; }
.b-card-text { color: var(--b-body); flex: 1; font-size: 0.9688rem; line-height: 1.55; margin: 0.5rem 0 0; }
.b-card .b-meta { font-size: 0.875rem; margin-top: 0.75rem; }
.b-empty { background: var(--b-sheet); border: 1px dashed var(--b-rule); border-radius: 12px; color: var(--b-muted); padding: 2rem; text-align: center; }
.b-sr { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.b-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
.b-toolbar[hidden], .b-pager[hidden], [data-search-panel][hidden], [data-search-empty][hidden], [data-static-list][hidden], .b-search-clear[hidden] { display: none !important; }
.b-search { flex: 1 1 18rem; max-width: 34rem; position: relative; }
.b-search-icon { color: var(--b-muted); left: 0.875rem; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); }
.b-search-input {
appearance: none;
background: var(--b-sheet);
border: 1px solid var(--b-rule);
border-radius: 6px;
color: var(--b-ink);
font: inherit;
font-size: 1rem;
min-height: 2.75rem;
padding: 0.5rem 2.75rem 0.5rem 2.5rem;
width: 100%;
}
.b-search-input::placeholder { color: var(--b-muted); opacity: 1; }
.b-search-input:hover { border-color: var(--b-muted); }
.b-search-input::-webkit-search-cancel-button, .b-search-input::-webkit-search-decoration { appearance: none; display: none; }
.b-search-clear { align-items: center; background: none; border: 0; border-radius: 4px; color: var(--b-muted); cursor: pointer; display: inline-flex; height: 2.25rem; justify-content: center; padding: 0; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 2.25rem; }
.b-search-clear:hover { color: var(--b-ink); }
.b-view { background: var(--b-sheet); border: 1px solid var(--b-rule); border-radius: 6px; display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; }
.b-view button { align-items: center; background: none; border: 0; border-radius: 4px; color: var(--b-muted); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.9375rem; font-weight: 600; gap: 0.4rem; min-height: 2.375rem; padding: 0.25rem 0.75rem; }
.b-view button:hover { color: var(--b-ink); }
.b-view button[aria-pressed="true"] { background: var(--b-action); color: var(--b-on-action); }
.b-status { color: var(--b-body); font-size: 0.9375rem; margin: -0.5rem 0 1rem; min-height: 1.5em; }
.b-status:empty { display: none; }
.b-empty-title { color: var(--b-ink); font-family: var(--brand-font-display); font-size: 1.1875rem; font-weight: 600; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.b-empty p { margin: 0 0 1rem; }
.b-empty .b-btn { margin-top: 0.25rem; }
:root.b-view-list .b-cards { gap: 0.625rem; grid-template-columns: minmax(0, 1fr); }
:root.b-view-list .b-card { column-gap: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); padding: 0.875rem 1.25rem; }
:root.b-view-list .b-card-img { display: none; }
:root.b-view-list .b-card-title { font-size: 1.125rem; margin-top: 0.25rem; }
:root.b-view-list .b-card-text { font-size: 0.9375rem; margin-top: 0.25rem; }
:root.b-view-list .b-card .b-meta { margin-top: 0.5rem; }
@media (min-width: 48rem) {
:root.b-view-list .b-card { grid-template-columns: minmax(0, 1fr) auto; }
:root.b-view-list .b-card > :not(.b-meta) { grid-column: 1; }
:root.b-view-list .b-card .b-meta { align-self: center; grid-column: 2; grid-row: 1 / span 3; margin: 0; text-align: right; white-space: nowrap; }
}
.b-pager { margin-top: 2.5rem; }
.b-pager ul { align-items: center; display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: center; list-style: none; margin: 0; padding: 0; }
.b-page { align-items: center; background: var(--b-sheet); border: 1px solid var(--b-rule); border-radius: 6px; color: var(--b-navy); display: inline-flex; font-size: 0.9375rem; font-variant-numeric: tabular-nums; font-weight: 600; gap: 0.375rem; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0.25rem 0.5rem; text-decoration: none; }
a.b-page:hover { border-color: var(--b-steel); color: var(--b-ink); }
.b-page--step { padding-inline: 0.875rem; }
.b-page[aria-current="page"] { background: var(--b-action); border-color: var(--b-action); color: var(--b-on-action); }
.b-page[aria-disabled="true"] { background: transparent; color: var(--b-muted); cursor: not-allowed; opacity: 0.6; }
.b-page-gap { color: var(--b-muted); padding-inline: 0.125rem; }
.b-pager-note { margin: 0.75rem 0 0; text-align: center; }
@media (max-width: 29.99rem) {
.b-page--step { padding-inline: 0.5rem; }
.b-page-label { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
}
.b-article { display: grid; gap: 0 3rem; grid-template-columns: minmax(0, 1fr); padding-bottom: 2rem; }
.b-article-head { max-width: 46rem; padding-block: clamp(1.5rem, 4vw, 2.75rem) 1.5rem; }
.b-article > .b-prose, .b-article > .b-toc { max-width: 46rem; }
.b-toc { background: var(--b-sheet); border: 1px solid var(--b-rule); border-radius: 12px; font-size: 0.9375rem; margin-bottom: 2rem; padding: 1rem 1.25rem; }
.b-toc-title { color: var(--b-muted); font-family: var(--brand-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; margin: 0 0 0.5rem; text-transform: uppercase; }
.b-toc ol { list-style: none; margin: 0; padding: 0; }
.b-toc li + li { margin-top: 0.375rem; }
.b-toc a { color: var(--b-body); text-decoration: none; }
.b-toc a:hover { color: var(--b-ink); text-decoration: underline; }
@media (min-width: 64rem) {
.b-article--toc { grid-template-columns: minmax(0, 46rem) minmax(0, 16rem); }
.b-article--toc .b-article-head { grid-column: 1 / -1; }
.b-article--toc .b-toc { align-self: start; background: none; border: 0; border-left: 1px solid var(--b-rule); border-radius: 0; grid-column: 2; grid-row: 2; margin: 0; padding: 0 0 0 1.25rem; position: sticky; top: 5.5rem; }
.b-article--toc .b-prose { grid-column: 1; grid-row: 2; }
}
.b-prose { color: var(--b-body); }
.b-prose > :first-child { margin-top: 0; }
.b-prose p, .b-prose ul, .b-prose ol, .b-prose blockquote, .b-prose .b-table { margin: 0 0 1.25rem; }
.b-prose h2 { border-top: 1px solid var(--b-rule); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.25; margin: 2.75rem 0 1rem; padding-top: 1.75rem; scroll-margin-top: 5rem; }
.b-prose h3 { font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.3; margin: 2rem 0 0.75rem; scroll-margin-top: 5rem; }
.b-prose a { color: var(--b-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.b-prose a:hover { text-decoration-thickness: 2px; }
.b-prose strong { color: var(--b-ink); font-weight: 600; }
.b-prose ul, .b-prose ol { padding-left: 1.4rem; }
.b-prose li + li { margin-top: 0.375rem; }
.b-prose li::marker { color: var(--b-steel); }
.b-prose blockquote { border-left: 3px solid var(--b-course); color: var(--b-ink); margin-left: 0; padding: 0.25rem 0 0.25rem 1.25rem; }
.b-prose blockquote > :last-child { margin-bottom: 0; }
.b-prose code { background: var(--b-code-bg); border-radius: 4px; font-family: var(--brand-font-display); font-size: 0.9em; font-variant-numeric: tabular-nums; padding: 0.1em 0.35em; }
.b-prose pre { background: var(--b-code-bg); border-radius: 8px; overflow-x: auto; padding: 1rem; }
.b-prose pre code { background: none; padding: 0; }
.b-prose hr { border: 0; border-top: 1px solid var(--b-rule); margin: 2.5rem 0; }
.b-prose img { border-radius: 8px; }
.b-prose figure { margin: 2rem 0; }
.b-prose figure > img, .b-prose figure > svg, .b-fig-art > img, .b-fig-art > svg { display: block; height: auto; margin-inline: auto; max-width: 100%; }
.b-prose figcaption { color: var(--b-muted); font-size: 0.9375rem; line-height: 1.5; margin-top: 0.75rem; }
.b-prose .b-fig { background: var(--b-sheet); border: 1px solid var(--b-rule); border-radius: 12px; padding: clamp(0.75rem, 3vw, 1.25rem); }
.b-prose .b-fig svg { font-family: var(--brand-font-body); }
.b-fig-title { color: var(--b-ink); font-weight: 600; }
.b-fig-credit { display: block; font-size: 0.875rem; margin-top: 0.25rem; }
.b-fig-art > .b-fig-svg { max-width: 26rem; width: 100%; }
.b-fig--wide .b-fig-art { overflow-x: auto; }
.b-fig--wide .b-fig-art > .b-fig-svg { max-width: none; min-width: 36rem; }
.b-fig-svg text { fill: var(--b-ink); }
.b-fig-svg .f-t { fill: var(--b-ink); }
.b-fig-svg .f-t2 { fill: var(--b-body); }
.b-fig-svg .f-t3 { fill: var(--b-muted); }
.b-fig-svg .f-ta { fill: var(--b-steel); }
.b-fig-svg .f-tc { fill: var(--b-course); }
.b-fig-svg .f-to { fill: var(--b-on-action); }
.b-fig-svg .f-code { font-family: var(--brand-font-display); font-variant-numeric: tabular-nums; font-weight: 600; }
.b-fig-svg .f-h { font-family: var(--brand-font-display); font-weight: 600; }
.b-fig-svg .f-b { font-weight: 600; }
.b-fig-svg .f-sheet { fill: var(--b-sheet); }
.b-fig-svg .f-paper { fill: var(--b-paper); }
.b-fig-svg .f-shoal { fill: var(--b-shoal); }
.b-fig-svg .f-solid { fill: var(--b-action); }
.b-fig-svg .f-accent { fill: var(--b-steel); }
.b-fig-svg .f-course { fill: var(--b-course); }
.b-fig-svg .f-rule { fill: var(--b-rule); }
.b-fig-svg .f-none { fill: none; }
.b-fig-svg .f-s { stroke: var(--b-rule); }
.b-fig-svg .f-s2 { stroke: var(--b-muted); }
.b-fig-svg .f-sa { stroke: var(--b-steel); }
.b-fig-svg .f-sc { stroke: var(--b-course); }
.b-fig-svg .f-sk { stroke: var(--b-ink); }
.b-prose .b-callout { background: var(--b-sheet); border: 1px solid var(--b-rule); border-left: 3px solid var(--b-steel); border-radius: 0 8px 8px 0; margin: 1.5rem 0; padding: 1rem 1.25rem; }
.b-prose .b-callout > :last-child { margin-bottom: 0; }
.b-prose mark { background: color-mix(in srgb, var(--b-course) 18%, transparent); border-radius: 3px; color: var(--b-ink); padding: 0 0.15em; }
.b-table { border: 1px solid var(--b-rule); border-radius: 8px; max-width: 100%; overflow-x: auto; }
.b-table table { border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; min-width: 100%; }
.b-table th, .b-table td { border-bottom: 1px solid var(--b-rule); padding: 0.625rem 0.875rem; text-align: left; vertical-align: top; }
.b-table th { background: var(--b-shoal); color: var(--b-ink); font-weight: 600; white-space: nowrap; }
.b-table tr:last-child td { border-bottom: 0; }
.b-faq { margin-top: 2.5rem; }
.b-faq-item + .b-faq-item { margin-top: 1.25rem; }
.b-faq-item h3 { margin-top: 0; }
.b-faq-item p { margin: 0; }
.b-sources ol { font-size: 0.9375rem; padding-left: 1.4rem; }
.b-host { color: var(--b-muted); font-size: 0.8125rem; white-space: nowrap; }
.b-note { border-top: 1px solid var(--b-rule); color: var(--b-muted); font-size: 0.9375rem; margin-top: 2rem; padding-top: 1.25rem; }
.b-cta { background: var(--b-shoal); border-left: 3px solid var(--b-course); border-radius: 0 12px 12px 0; margin: 2rem 0; padding: 1.5rem clamp(1.25rem, 3vw, 2rem); }
.b-cta-title { font-size: 1.3125rem; letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 0.5rem; }
.b-cta p { margin: 0 0 0.75rem; }
.b-prose .b-cta a.b-btn { color: var(--b-on-action); text-decoration: none; }
.b-cta-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1rem !important; }
.b-cta .b-small { margin: 0.75rem 0 0; }
.b-cta--compact .b-cta-actions { margin-top: 0.5rem !important; }
.b-share { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.b-share--top { margin-top: 1.25rem; }
.b-share--end { margin: 1.5rem 0 0; }
.b-share-label { color: var(--b-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; margin-right: 0.25rem; text-transform: uppercase; }
.b-share-btn, .b-prose a.b-share-btn {
align-items: center;
background: var(--b-sheet);
border: 1px solid var(--b-rule);
border-radius: 6px;
color: var(--b-navy);
cursor: pointer;
display: inline-flex;
font: inherit;
font-size: 0.9375rem;
font-weight: 600;
gap: 0.4rem;
justify-content: center;
line-height: 1.25;
min-height: 2.75rem;
min-width: 2.75rem;
padding: 0.25rem 0.75rem;
text-decoration: none;
white-space: nowrap;
}
.b-share-btn:hover, .b-prose a.b-share-btn:hover { border-color: var(--b-steel); color: var(--b-ink); }
.b-share-btn svg { flex: none; }
.b-share-mark { display: block; }
.b-share-mark[data-mark="x"] { color: var(--b-mark-x); }
.b-share-defs { height: 0; overflow: hidden; position: absolute; width: 0; }
@media (prefers-reduced-motion: no-preference) { .b-share-btn { transition: border-color 0.15s ease, color 0.15s ease; } }
.b-share-swap { display: inline-grid; }
.b-share-swap > span { grid-area: 1 / 1; }
.b-share-swap [data-active] { visibility: hidden; }
.b-share-i-active { display: none; }
[data-share-copy][data-done] { border-color: var(--b-steel); color: var(--b-ink); }
[data-share-copy][data-done] [data-idle] { visibility: hidden; }
[data-share-copy][data-done] [data-active] { visibility: visible; }
[data-share-more][aria-expanded="true"] { border-color: var(--b-steel); color: var(--b-ink); }
[data-share-copy][data-done] .b-share-i-idle { display: none; }
[data-share-copy][data-done] .b-share-i-active { display: block; }
.b-share-nets, .b-share-extras { display: contents; }
.b-share-js, .b-prose .b-share-js { display: none; }
:root.b-js .b-share-js { display: inline-flex; }
:root:not(.b-can-share) .b-share-native { display: none; }
:root.b-can-share .b-share-label { display: none; }
:root.b-js .b-share:not([data-open]) .b-share-extras { display: none; }
:root.b-js .b-share-more--narrow { display: none; }
@media (max-width: 39.99rem) {
.b-share { gap: 0.375rem; }
.b-share-btn, .b-prose a.b-share-btn { padding-inline: 0.625rem; }
:root.b-js .b-share-more--narrow { display: inline-flex; }
:root.b-js .b-share-more--wide { display: none; }
:root.b-js .b-share:not([data-open]) .b-share-nets { display: none; }
}
.b-prevnext { border-top: 1px solid var(--b-rule); display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1rem; padding-top: 1.5rem; }
.b-prevnext a { background: var(--b-sheet); border: 1px solid var(--b-rule); border-radius: 12px; color: var(--b-ink); display: flex; flex-direction: column; font-family: var(--brand-font-display); font-weight: 600; gap: 0.25rem; line-height: 1.3; padding: 1rem 1.25rem; text-decoration: none; }
.b-prevnext a:hover { border-color: var(--b-steel); }
.b-prevnext .b-small { font-family: var(--brand-font-body); font-weight: 400; }
@media (min-width: 40rem) { .b-prevnext { grid-template-columns: 1fr 1fr; } .b-prevnext .b-next { text-align: right; } }
.b-related { margin-top: 3rem; }
.b-back { margin: 2.5rem 0 3rem; }
.b-footer { background: var(--b-sheet); border-top: 1px solid var(--b-rule); margin-top: 3rem; padding-block: 3rem 2rem; }
.b-footer-grid { display: grid; gap: 1.75rem clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b-footer-brand { grid-column: 1 / -1; }
.b-footer-tagline { color: var(--b-body); font-size: 1rem; line-height: 1.5; margin: 0.875rem 0 0; max-width: 26em; text-wrap: balance; }
.b-footer-brand .b-btn { margin-top: 1.125rem; }
@media (max-width: 35.99rem) {
.b-footer-contact, .b-footer-legal { grid-column: 1 / -1; }
.b-footer-legal ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
}
@media (min-width: 36rem) and (max-width: 63.99rem) {
.b-footer-brand { align-items: end; column-gap: 2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.b-footer-brand > * { grid-column: 1; }
.b-footer-brand .b-btn { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.b-footer-title { color: var(--b-ink); font-family: var(--brand-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 0.5rem; text-transform: uppercase; }
.b-footer ul { list-style: none; margin: 0; padding: 0; }
.b-footer nav a { color: var(--b-body); display: inline-block; font-size: 0.9375rem; overflow-wrap: anywhere; padding-block: 0.3125rem; text-decoration: none; }
.b-footer nav a:hover { color: var(--b-ink); text-decoration: underline; }
.b-footer-base { border-top: 1px solid var(--b-rule); color: var(--b-muted); display: grid; font-size: 0.8125rem; gap: 0.25rem; line-height: 1.5; margin-top: 2rem; padding-top: 1.25rem; text-wrap: pretty; }
.b-footer-base p { margin: 0; }
.b-footer-base .b-footer-disclaimer { color: var(--b-body); }
@media (min-width: 64rem) { .b-footer-grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(max-content, 1.15fr) minmax(0, 1.1fr); } .b-footer-brand { grid-column: auto; } }
@media print {
:root, :root.dark, :root:not(.light) {
--b-paper: #ffffff;
--b-sheet: #ffffff;
--b-shoal: #e4f2ff;
--b-ink: #11304d;
--b-body: #3a4856;
--b-muted: #5a6672;
--b-rule: #d3dce5;
--b-navy: #26436e;
--b-steel: #2e69a6;
--b-course: #a61e70;
--b-action: #26436e;
--b-on-action: #ffffff;
--b-code-bg: #eef3f8;
color-scheme: light;
}
.b-header, .b-footer, .b-toolbar, .b-pager, .b-toc, .b-cta, .b-share, .b-prevnext, .b-related, .b-back { display: none; }
.b-prose a.b-ext::after { content: " (" attr(href) ")"; font-size: 0.85em; }
.b-prose figure, .b-table { break-inside: avoid; }
.b-fig--wide .b-fig-art { overflow: visible; }
.b-fig--wide .b-fig-art > .b-fig-svg { max-width: 100%; min-width: 0; }
.b-fig-svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}