
@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/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("/assets/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("/assets/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("/assets/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 {
  --d-paper: #f5f8fb;
  --d-sheet: #ffffff;
  --d-shoal: #e4f2ff;
  --d-ink: #11304d;
  --d-body: #3a4856;
  --d-muted: #5a6672;
  --d-rule: #d3dce5;
  --d-link: #2e69a6;
  --d-action: #26436e;
  --d-on-action: #ffffff;
  --d-code-bg: #eef3f8;
  --d-panel: #0e1b29;
  --d-panel-head: #16283a;
  --d-panel-ink: #e6edf5;
  --d-panel-muted: #a9b8c8;
  --d-panel-rule: #2a3d52;
  --d-warn-bg: #fff4d6;
  --d-warn-ink: #5c4200;
  --d-danger: #b3261e;
  --d-top: 3.5rem;
  --d-nav: 17.5rem;
  --d-rail: 15rem;
  --d-measure: 38rem;
  --d-column: 54rem;
  --d-page: 94rem;
  color-scheme: light;
}
:root.dark {
  --d-paper: #0a121b;
  --d-sheet: #121a23;
  --d-shoal: #10263c;
  --d-ink: #f2f6fa;
  --d-body: #c3ccd6;
  --d-muted: #98a5b2;
  --d-rule: #2a3540;
  --d-link: #80afe1;
  --d-action: #cbe4ff;
  --d-on-action: #0e2a47;
  --d-code-bg: #16212d;
  --d-panel: #060c13;
  --d-panel-head: #101a25;
  --d-warn-bg: #3a2c05;
  --d-warn-ink: #ffe9a8;
  --d-danger: #ffb4ab;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --d-paper: #0a121b;
    --d-sheet: #121a23;
    --d-shoal: #10263c;
    --d-ink: #f2f6fa;
    --d-body: #c3ccd6;
    --d-muted: #98a5b2;
    --d-rule: #2a3540;
    --d-link: #80afe1;
    --d-action: #cbe4ff;
    --d-on-action: #0e2a47;
    --d-code-bg: #16212d;
    --d-panel: #060c13;
    --d-panel-head: #101a25;
    --d-warn-bg: #3a2c05;
    --d-warn-ink: #ffe9a8;
  --d-danger: #ffb4ab;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--d-top) + 1rem); -webkit-text-size-adjust: 100%; }
body { background: var(--d-paper); color: var(--d-body); font-family: var(--brand-font-body); font-size: 1rem; line-height: 1.6; margin: 0; }
a { color: var(--d-link); text-underline-offset: 0.15em; }
a:hover { color: var(--d-ink); }
:focus-visible { outline: 2px solid var(--d-link); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { color: var(--d-ink); font-family: var(--brand-font-display); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); margin: 0; overflow-wrap: anywhere; }
h2 { font-size: 1.375rem; margin: 0; }
h3 { font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; }
code, pre { font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 0.875em; }
:not(pre) > code { background: var(--d-code-bg); border-radius: 4px; color: var(--d-ink); overflow-wrap: anywhere; padding: 0.1em 0.35em; }
pre { background: var(--d-panel); border-radius: 8px; color: var(--d-panel-ink); line-height: 1.55; margin: 1rem 0; overflow: auto; padding: 0.875rem 1rem; position: relative; tab-size: 2; }
pre code { font-size: 0.8125rem; }
.d-skip { background: var(--d-action); color: var(--d-on-action); left: 0.5rem; padding: 0.5rem 0.75rem; position: absolute; top: -4rem; z-index: 30; }
.d-skip:focus { top: 0.5rem; }
.d-top { background: var(--d-sheet); border-bottom: 1px solid var(--d-rule); height: var(--d-top); position: sticky; top: 0; z-index: 20; }
.d-top-in { align-items: center; display: flex; gap: 1rem; height: 100%; margin: 0 auto; max-width: var(--d-page); padding: 0 1rem; }
.d-page-wide, .d-page-explorer { --d-page: 132rem; }
.d-logo { align-items: center; color: var(--d-ink); display: flex; font-family: var(--brand-font-display); font-weight: 600; gap: 0.5rem; text-decoration: none; }
.d-logo img { display: block; height: 1.75rem; width: auto; }
.d-logo-text { border-left: 1px solid var(--d-rule); color: var(--d-muted); font-size: 0.9375rem; padding-left: 0.625rem; }
.d-logo img.d-on-dark { display: none; }
:root.dark .d-logo img.d-on-light { display: none; }
:root.dark .d-logo img.d-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .d-logo img.d-on-light { display: none; }
  :root:not(.light) .d-logo img.d-on-dark { display: block; }
}
.d-top-links { display: flex; flex: 1; gap: 1.25rem; justify-content: flex-end; }
.d-top-links a { align-items: center; color: var(--d-body); display: inline-flex; font-size: 0.9375rem; gap: 0.375rem; text-decoration: none; white-space: nowrap; }
.d-top-links a:hover, .d-top-links a[aria-current] { color: var(--d-ink); }
.d-top-links a:hover span { text-decoration: underline; }
.d-top-links a[aria-current] span { font-weight: 600; }
.d-top .d-menu-btn { display: none; }
.d-icon { flex: none; height: 1rem; width: 1rem; }
.d-icon-ext { height: 0.8125rem; opacity: 0.75; width: 0.8125rem; }
a.d-ext .d-icon-ext { display: inline-block; margin-left: 0.2em; vertical-align: -0.05em; }
.d-btn, .d-btn-quiet, .d-menu-btn { align-items: center; background: var(--d-sheet); border: 1px solid var(--d-rule); border-radius: 6px; color: var(--d-ink); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.875rem; gap: 0.375rem; min-height: 2.25rem; padding: 0.25rem 0.75rem; white-space: nowrap; }
.d-btn:hover, .d-btn-quiet:hover, .d-menu-btn:hover { border-color: var(--d-action); }
.d-btn-quiet { font-size: 0.8125rem; min-height: 1.875rem; padding: 0.125rem 0.5rem; }
.d-theme .d-to-light { display: none; }
:root.dark .d-theme .d-to-light { display: block; }
:root.dark .d-theme .d-to-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .d-theme .d-to-light { display: block; }
  :root:not(.light) .d-theme .d-to-dark { display: none; }
}
.d-shell { display: grid; grid-template-columns: var(--d-nav) minmax(0, 1fr); margin: 0 auto; max-width: var(--d-page); }
.d-nav { align-self: start; border-right: 1px solid var(--d-rule); height: calc(100vh - var(--d-top)); overflow-y: auto; padding: 1.25rem 1rem 3rem; position: sticky; top: var(--d-top); }
.d-field { display: block; margin-bottom: 0.75rem; }
.d-field > span, .d-field > label { color: var(--d-muted); display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.25rem; text-transform: uppercase; }
.d-filter { position: relative; }
.d-filter-icon { bottom: 0.625rem; color: var(--d-muted); left: 0.625rem; pointer-events: none; position: absolute; }
.d-field.d-filter input { padding-left: 2rem; }
.d-field input, .d-field select { background: var(--d-sheet); border: 1px solid var(--d-rule); border-radius: 6px; color: var(--d-ink); font: inherit; font-size: 0.9375rem; min-height: 2.25rem; padding: 0.25rem 0.5rem; width: 100%; }
.d-version-row { display: flex; gap: 0.375rem; }
.d-version-row .d-btn-quiet { min-height: 2.25rem; }
:root:not(.d-js) .d-version-row .d-btn-quiet { display: none; }
.d-version-note { font-size: 0.8125rem; margin: -0.375rem 0 1rem; }
.d-version-note a { align-items: center; display: inline-flex; gap: 0.375rem; padding: 0.3125rem 0.5rem; }
.d-nav-title { color: var(--d-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; margin: 1.25rem 0 0.375rem; text-transform: uppercase; }
.d-nav-list, .d-nav-sub { list-style: none; margin: 0; padding: 0; }
.d-nav a { align-items: center; border-radius: 6px; color: var(--d-body); display: flex; gap: 0.375rem; font-size: 0.9375rem; padding: 0.3125rem 0.5rem; text-decoration: none; }
.d-nav a:hover { background: var(--d-shoal); color: var(--d-ink); }
.d-nav a[aria-current="page"] { background: var(--d-shoal); color: var(--d-ink); font-weight: 600; }
.d-nav-sub { border-left: 1px solid var(--d-rule); display: none; margin: 0.125rem 0 0.375rem 0.75rem; padding-left: 0.375rem; }
.d-nav-sub a { font-size: 0.875rem; padding: 0.1875rem 0.5rem; }
.d-nav-page[data-current] > .d-nav-sub, .d-nav-page[data-open] > .d-nav-sub { display: block; }
.d-nav-empty { color: var(--d-muted); font-size: 0.875rem; }
.d-main { min-width: 0; padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem; }
.d-banner { background: var(--d-warn-bg); border-radius: 8px; color: var(--d-warn-ink); margin: 0 0 1.5rem; max-width: var(--d-column); padding: 0.75rem 1rem; }
.d-banner a { color: inherit; font-weight: 600; }
.d-body { display: grid; gap: 0 2.5rem; grid-template-columns: minmax(0, 1fr); }
.d-page-head { min-width: 0; }
.d-main { overflow-x: clip; }
.d-rail { align-items: flex-start; display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1rem; min-width: 0; }
.d-content { min-width: 0; }
.d-summary { color: var(--d-muted); font-size: 1.0625rem; margin: 0.5rem 0 0; max-width: var(--d-measure); }
.d-status { color: var(--d-ink); font-size: 0.875rem; margin: 0; min-height: 1.25rem; }
.d-copy { display: flex; position: relative; }
.d-copy .d-btn:first-child { border-radius: 6px 0 0 6px; }
.d-copy .d-btn-more { border-left: 0; border-radius: 0 6px 6px 0; }
.d-menu { background: var(--d-sheet); border: 1px solid var(--d-rule); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); left: 0; list-style: none; margin: 0; max-width: calc(100vw - 2rem); min-width: min(16rem, calc(100vw - 2rem)); padding: 0.25rem; position: absolute; top: calc(100% + 0.25rem); z-index: 15; }
.d-menu a span, .d-menu button span { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.d-menu a, .d-menu button { align-items: center; background: none; border: 0; border-radius: 6px; color: var(--d-ink); cursor: pointer; display: flex; font: inherit; font-size: 0.9375rem; gap: 0.625rem; padding: 0.5rem 0.75rem; text-align: left; text-decoration: none; width: 100%; }
.d-menu .d-icon { color: var(--d-muted); }
.d-menu a:hover, .d-menu button:hover { background: var(--d-shoal); }
.d-toc { border-left: 2px solid var(--d-rule); margin: 0.5rem 0 0; max-width: 100%; padding-left: 1rem; }
.d-toc-title { color: var(--d-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 0.25rem; text-transform: uppercase; }
.d-toc ul { list-style: none; margin: 0; padding: 0; }
.d-toc a { color: var(--d-body); display: block; font-size: 0.875rem; line-height: 1.35; padding: 0.25rem 0; text-decoration: none; }
.d-toc a:hover { color: var(--d-ink); text-decoration: underline; }
.d-toc a[aria-current] { color: var(--d-link); font-weight: 600; }
.d-toc a:focus-visible { outline-offset: -2px; }
.d-lead { margin-top: 1.5rem; max-width: var(--d-column); }
.d-sec { border-top: 1px solid var(--d-rule); margin-top: 2.5rem; padding-top: 2rem; }
.d-sec-main { max-width: var(--d-column); min-width: 0; }
.d-lead > p, .d-lead > ul, .d-lead > ol, .d-sec-main > p, .d-sec-main > ul, .d-sec-main > ol, .d-op > p, .d-op > ul { max-width: var(--d-measure); }
.d-sec-main p, .d-sec-main li, .d-lead p, .d-lead li { overflow-wrap: anywhere; }
.d-h2 { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; justify-content: space-between; margin-bottom: 0.75rem; }
.d-anchor { color: inherit; text-decoration: none; }
.d-anchor:hover { text-decoration: underline; }
.d-table { margin: 1rem 0; overflow-x: auto; }
table { border-collapse: collapse; font-size: 0.9375rem; width: 100%; }
th, td { border-bottom: 1px solid var(--d-rule); padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: top; }
th { color: var(--d-muted); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
td:first-child { white-space: nowrap; }
td:first-child code { overflow-wrap: normal; }
.d-endpoint { align-items: center; background: var(--d-code-bg); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0.5rem 0.75rem; }
.d-endpoint code { background: none; color: var(--d-ink); font-size: 0.9375rem; padding: 0; }
.d-method { border: 1px solid currentColor; border-radius: 4px; color: var(--d-ink); font-family: var(--brand-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.0625rem 0.375rem; }
.d-tag { color: var(--d-muted); font-size: 0.8125rem; }
.d-try { font-size: 0.9375rem; }
.d-try a { align-items: center; display: inline-flex; gap: 0.375rem; }
.d-example { background: var(--d-panel); border-radius: 10px; color: var(--d-panel-ink); margin: 1rem 0 0; overflow: hidden; }
.d-example-head { align-items: center; background: var(--d-panel-head); border-bottom: 1px solid var(--d-panel-rule); display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; padding: 0.5rem 0.875rem; }
.d-example-title { color: var(--d-panel-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.d-example-title code { background: none; color: var(--d-panel-ink); }
.d-example pre { background: none; border-radius: 0; margin: 0; max-height: 26rem; }
.d-example pre:focus-visible, pre:focus-visible, .d-table:focus-visible { outline: 2px solid #9cc7f5; outline-offset: -2px; }
.d-example-none { color: var(--d-panel-muted); font-size: 0.875rem; margin: 0; padding: 0.875rem; }
.d-tabs { display: flex; gap: 0.25rem; }
.d-tab { background: none; border: 1px solid transparent; border-radius: 5px; color: var(--d-panel-muted); cursor: pointer; font: inherit; font-size: 0.8125rem; min-height: 1.75rem; padding: 0.125rem 0.5rem; }
.d-tab[aria-selected="true"] { background: var(--d-panel); border-color: var(--d-panel-rule); color: var(--d-panel-ink); }
.d-tab:focus-visible, .d-code-copy:focus-visible { outline-color: #9cc7f5; }
:root:not(.d-js) .d-tabs { display: none; }
:root.d-js .d-pane[hidden] { display: none; }
.d-code-copy { align-items: center; background: var(--d-panel-head); border: 1px solid var(--d-panel-rule); border-radius: 5px; color: var(--d-panel-ink); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.75rem; gap: 0.3125rem; min-height: 1.75rem; padding: 0.125rem 0.5rem; position: absolute; right: 0.5rem; top: 0.5rem; }
.d-code-copy .d-icon { height: 0.875rem; width: 0.875rem; }
.d-code-copy[data-copied] { border-color: #5fd08c; color: #8ff0b4; }
.d-code-wrap { position: relative; }
.d-pager { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 3rem; max-width: var(--d-column); }
.d-pager a { align-items: center; border: 1px solid var(--d-rule); border-radius: 8px; color: var(--d-ink); display: flex; font-weight: 600; gap: 0.75rem; padding: 0.75rem 1rem; text-decoration: none; }
.d-pager a:hover { border-color: var(--d-action); }
.d-pager-text > span { color: var(--d-muted); display: block; font-size: 0.75rem; font-weight: 400; }
.d-pager-next { justify-content: flex-end; text-align: right; }
.d-foot { border-top: 1px solid var(--d-rule); color: var(--d-muted); font-size: 0.875rem; margin-top: 3rem; max-width: var(--d-column); padding-top: 1rem; }
.d-foot a[target] { align-items: baseline; display: inline-flex; gap: 0.2em; }
.d-foot p { margin: 0.375rem 0; }
@media (min-width: 75rem) {
  .d-sec-split { column-gap: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .d-sec-side { align-self: start; max-height: calc(100vh - var(--d-top) - 2rem); overflow-y: auto; position: sticky; top: calc(var(--d-top) + 1rem); }
  .d-sec-side .d-example:first-child { margin-top: 0; }
  .d-page-wide .d-sec-main { max-width: none; }
}
@media (min-width: 80rem) {
  .d-page-guide .d-body { grid-template-columns: minmax(0, var(--d-column)) var(--d-rail); justify-content: space-between; }
}
@media (min-width: 112rem) {
  .d-page-wide .d-body { grid-template-columns: minmax(0, 1fr) var(--d-rail); }
}
@media (min-width: 80rem) { .d-page-guide .d-rail { align-self: start; grid-column: 2; grid-row: 1 / span 2; margin-top: 0.375rem; position: sticky; top: calc(var(--d-top) + 1.5rem); } }
@media (min-width: 112rem) { .d-page-wide .d-rail { align-self: start; grid-column: 2; grid-row: 1 / span 2; margin-top: 0.375rem; position: sticky; top: calc(var(--d-top) + 1.5rem); } }
@media (min-width: 80rem) { .d-page-guide .d-menu { left: auto; right: 0; } .d-page-guide .d-toc { margin-top: 1rem; max-height: calc(100vh - var(--d-top) - 10rem); overflow-y: auto; } }
@media (min-width: 112rem) { .d-page-wide .d-menu { left: auto; right: 0; } .d-page-wide .d-toc { margin-top: 1rem; max-height: calc(100vh - var(--d-top) - 10rem); overflow-y: auto; } }
@media (min-width: 56.0625rem) and (max-width: 111.9375rem) { .d-page-wide .d-toc { display: none; } }
@media (max-width: 22.5rem) {
  .d-top-in { gap: 0.5rem; padding: 0 0.75rem; }
  .d-logo-text { display: none; }
  .d-top .d-menu-btn { padding: 0.25rem 0.5rem; }
}
@media (pointer: coarse) {
  .d-btn, .d-btn-quiet, .d-menu-btn, .d-code-copy, .d-tab, .d-field input, .d-field select { min-height: 2.75rem; }
  .d-btn-quiet, .d-code-copy, .d-tab { min-width: 2.75rem; }
  .d-nav a, .d-toc a, .d-menu a, .d-menu button { min-height: 2.75rem; }
}
@media (max-width: 56rem) {
  .d-shell { display: block; }
  .d-top .d-menu-btn { display: inline-flex; }
  .d-top-links { display: none; }
  .d-top-in { justify-content: space-between; }
  .d-theme span { position: absolute; clip-path: inset(50%); height: 1px; overflow: hidden; width: 1px; }
  .d-nav { background: var(--d-paper); border-right: 0; display: none; height: auto; max-height: calc(100vh - var(--d-top)); position: fixed; left: 0; right: 0; top: var(--d-top); z-index: 18; }
  :root.d-nav-open .d-nav { display: block; }
  :root:not(.d-js) .d-nav { display: block; position: static; max-height: none; }
  :root:not(.d-js) .d-top .d-menu-btn { display: none; }
  .d-table table { min-width: 30rem; }
  .d-pager { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
