:root {
--orange-50:#fef3ec; --orange-100:#fde0d1; --orange-200:#fac4a6; --orange-300:#f49d78;
--orange-400:#f28a5c; --orange-500:#f07b49; --orange-600:#e2622d; --orange-700:#bd4f22;
--amber-50:#fef7e8; --amber-100:#fdebc4; --amber-200:#f9d68a; --amber-300:#f2af4c;
--amber-400:#e89a2f; --amber-500:#cf821d;
--ink-900:#000000; --ink-800:#111111; --ink-700:#1c1c1c; --ink-600:#2a2a2a;
--white:#ffffff; --grey-900:#202124; --grey-700:#3c4043; --grey-600:#5f6368;
--grey-400:#9aa0a6; --grey-300:#dadce0; --grey-200:#e8eaed; --grey-100:#f1f3f4; --grey-50:#f8f9fa;
--green-500:#188038; --green-50:#e6f4ea; --red-500:#d93025; --red-50:#fce8e6;
--yellow-500:#f9ab00; --yellow-50:#fef7e0;
--brand:var(--orange-500); --brand-hover:var(--orange-600); --brand-active:var(--orange-700);
--brand-tint:var(--orange-50); --brand-tint-2:var(--orange-100); --brand-secondary:var(--amber-300);
--text-strong:var(--grey-900); --text-body:var(--grey-900); --text-muted:var(--grey-600);
--text-hint:var(--grey-400); --text-onbrand:var(--white); --text-link:var(--orange-600);
--surface-page:var(--white); --surface-canvas:var(--grey-50); --surface-card:var(--white);
--surface-sunken:var(--grey-50); --surface-inverse:var(--ink-800);
--border:var(--grey-300); --border-strong:var(--grey-400); --divider:var(--grey-100);
--positive:var(--green-500); --positive-bg:var(--green-50); --negative:var(--red-500);
--negative-bg:var(--red-50); --warning:var(--yellow-500); --warning-bg:var(--yellow-50);
--focus-ring:var(--orange-500);
--series-1:#f07b49; --series-2:#f2af4c; --series-3:#12b5cb; --series-4:#9334e6;
--series-5:#188038; --series-6:#e52592; --series-7:#f49d78; --series-8:#5f6368;
--radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;
--shadow-card:0 1px 2px rgba(60,64,67,.08); --shadow-raised:0 1px 3px rgba(60,64,67,.15);
--shadow-menu:0 4px 14px rgba(60,64,67,.20); --shadow-popover:0 6px 20px rgba(60,64,67,.25);
--shadow-drawer:2px 0 14px rgba(60,64,67,.25);
--ease-standard:cubic-bezier(0.2,0,0,1); --dur-fast:120ms; --dur-base:150ms; --dur-slow:200ms;
--font-display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
--font-ui:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
--font-mono:"Roboto Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
* { box-sizing: border-box; }
::selection { background: var(--orange-200); color: var(--ink-800); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:root {
--orange-50:#fef3ec; --orange-100:#fde0d1; --orange-200:#fac4a6; --orange-300:#f49d78;
--orange-400:#f28a5c; --orange-500:#f07b49; --orange-600:#e2622d; --orange-700:#bd4f22;
--amber-50:#fef7e8; --amber-100:#fdebc4; --amber-200:#f9d68a; --amber-300:#f2af4c;
--amber-400:#e89a2f; --amber-500:#cf821d;
--ink-900:#000000; --ink-800:#111111; --ink-700:#1c1c1c; --ink-600:#2a2a2a;
--white:#ffffff;
--grey-900:#202124; --grey-700:#3c4043; --grey-600:#5f6368; --grey-400:#9aa0a6;
--grey-300:#dadce0; --grey-200:#e8eaed; --grey-100:#f1f3f4; --grey-50:#f8f9fa;
--green-500:#188038; --green-50:#e6f4ea;
--red-500:#d93025; --red-50:#fce8e6;
--yellow-500:#f9ab00; --yellow-50:#fef7e0;
--brand:var(--orange-500);
--brand-hover:var(--orange-600);
--brand-active:var(--orange-700);
--brand-tint:var(--orange-50);
--brand-tint-2:var(--orange-100);
--brand-secondary:var(--amber-300);
--text-strong:var(--grey-900);
--text-body:var(--grey-900);
--text-muted:var(--grey-600);
--text-hint:var(--grey-400);
--text-onbrand:var(--white);
--text-link:var(--orange-600);
--surface-page:var(--white);
--surface-canvas:var(--grey-50);
--surface-card:var(--white);
--surface-sunken:var(--grey-50);
--surface-inverse:var(--ink-800);
--border:var(--grey-300);
--border-strong:var(--grey-400);
--divider:var(--grey-100);
--positive:var(--green-500); --positive-bg:var(--green-50);
--negative:var(--red-500); --negative-bg:var(--red-50);
--warning:var(--yellow-500); --warning-bg:var(--yellow-50);
--focus-ring:var(--orange-500);
--series-1:#f07b49; --series-2:#f2af4c; --series-3:#12b5cb; --series-4:#9334e6;
--series-5:#188038; --series-6:#e52592; --series-7:#f49d78; --series-8:#5f6368;
--font-display:"Vazirmatn","Yekan Bakh",Tahoma,system-ui,sans-serif;
--font-ui:"Vazirmatn","Yekan Bakh",Tahoma,system-ui,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
--fs-micro:11px;
--fs-caption:12px;
--fs-small:13px;
--fs-body:14px;
--fs-base:15px;
--fs-lg:18px;
--fs-h2:22px;
--fs-kpi:30px;
--fs-display:44px;
--fs-display-lg:64px;
--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--lh-tight:1.15;
--lh-snug:1.3;
--lh-normal:1.5;
--tracking-label:0.6px;
--tracking-kpi:-0.5px;
--tracking-display:-1px;
--space-0:0px;
--space-4:4px;
--space-8:8px;
--space-12:12px;
--space-16:16px;
--space-20:20px;
--space-24:24px;
--space-32:32px;
--space-40:40px;
--space-48:48px;
--space-64:64px;
--pad-card:16px 18px;
--pad-input:8px 11px;
--pad-button:9px 18px;
--radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;
--shadow-card:0 1px 2px rgba(60,64,67,.08);
--shadow-raised:0 1px 3px rgba(60,64,67,.15);
--shadow-menu:0 4px 14px rgba(60,64,67,.20);
--shadow-popover:0 6px 20px rgba(60,64,67,.25);
--shadow-drawer:2px 0 14px rgba(60,64,67,.25);
--ease-standard:cubic-bezier(0.2,0,0,1);
--dur-fast:120ms; --dur-base:150ms; --dur-slow:200ms;
--text-hint:#6b7074;
--brand-active-hover:#a5451e;
}
[dir="rtl"] {
--leading-normal:1.55;
}
* { box-sizing: border-box; }
::selection { background: var(--orange-200); color: var(--ink-800); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@font-face {
font-family: "Vazirmatn";
src: url(/assets/fonts/Vazirmatn-Variable.4e3fa217d3.woff2) format("woff2-variations"),
url(/assets/fonts/Vazirmatn-Variable.4e3fa217d3.woff2) format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
--apx-pane-top: 60px;
--apx-sidebar-w: 248px;
--apx-toc-w: 230px;
--apx-main-max: 880px;
--apx-shell-max: 1080px;
}
* { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
html, body { margin: 0; padding: 0; }
body.apx {
min-height: 100vh;
background: var(--surface-canvas);
color: var(--text-body);
font-family: var(--font-ui);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: #fde0d1; }
img, svg, video { max-width: 100%; }
img { height: auto; }
svg { flex: none; }
a { color: var(--text-link); }
code, pre, kbd, samp, .apx-mono, .apx-ltr {
direction: ltr;
unicode-bidi: isolate;
font-family: var(--font-mono);
}
code {
font-size: 0.92em;
background: var(--surface-canvas);
border: 1px solid var(--divider);
border-radius: var(--radius-xs);
padding: 1px 5px;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[dir="rtl"] .apx-sidebar__group,
[dir="rtl"] .apx-toc__title,
[dir="rtl"] .apx-hero__eyebrow,
[dir="rtl"] .apx-prodcard__tag,
[dir="rtl"] .apx-search__group,
[dir="rtl"] .apx-rail__label,
[dir="rtl"] .apx-table th {
letter-spacing: normal;
text-transform: none;
}
.apx-skip {
position: fixed;
inset-inline-start: 12px;
top: -100px;
z-index: 100;
padding: 10px 16px;
background: #fff;
border: 1px solid var(--border);
border-radius: 0 0 var(--radius-md) var(--radius-md);
font-size: 13.5px;
font-weight: var(--fw-semibold);
color: var(--brand-active);
text-decoration: none;
}
.apx-skip:focus { top: 0; }
.adpix-scroll { scrollbar-width: thin; scrollbar-color: var(--grey-300) transparent; }
.adpix-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.adpix-scroll::-webkit-scrollbar-track { background: transparent; }
.adpix-scroll::-webkit-scrollbar-thumb {
background: #dadce0;
border-radius: 999px;
border: 3px solid #fff;
}
.adpix-scroll::-webkit-scrollbar-thumb:hover { background: #c4c7cc; }
@keyframes apxFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes apxPop {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.apx-header {
position: sticky;
top: 0;
z-index: 40;
}
.apx-header__bar {
height: 60px;
background: #fff;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 14px;
padding: 0 24px;
}
.apx-picker,
.apx-search-btn,
.apx-lang,
.apx-cta { height: 38px; }
.apx-brand {
display: flex;
align-items: center;
gap: 9px;
flex: 0 1 auto;
min-width: 0;
text-decoration: none;
}
.apx-brand__label,
.apx-brand__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apx-brand__mark { width: 26px; height: 22.5px; }
.apx-brand__name {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 19px;
color: var(--ink-800);
letter-spacing: .2px;
}
.apx-brand__sep {
font-size: 13px;
color: var(--text-muted);
font-weight: var(--fw-regular);
}
.apx-brand__label {
font-size: 14px;
color: var(--text-muted);
font-weight: var(--fw-medium);
}
.apx-picker-wrap { position: relative; flex: 0 1 auto; min-width: 0; }
.apx-picker {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
color: var(--text-body);
font-family: inherit;
font-size: 13.5px;
font-weight: var(--fw-medium);
white-space: nowrap;
min-width: 0;
max-width: 100%;
}
.apx-picker:hover { background: var(--surface-canvas); }
.apx-picker__tile {
display: flex;
width: 22px;
height: 22px;
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
background: var(--brand-tint);
color: var(--apx-accent, var(--brand));
flex: none;
}
.apx-picker__tile svg { width: 13px; height: 13px; }
.apx-picker__label { overflow: hidden; text-overflow: ellipsis; }
.apx-picker__chev {
width: 14px;
height: 14px;
color: var(--text-hint);
transition: transform var(--dur-base) var(--ease-standard);
}
.apx-picker[aria-expanded="true"] .apx-picker__chev { transform: rotate(180deg); }
.apx-picker__menu {
position: absolute;
top: 44px;
inset-inline-start: 0;
width: 260px;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-menu);
padding: 6px;
z-index: 55;
animation: apxPop 140ms var(--ease-standard);
}
.apx-picker__menu[hidden] { display: none; }
.apx-picker__item {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 10px;
border-radius: var(--radius-md);
text-decoration: none;
}
.apx-picker__item:hover { background: var(--surface-canvas); }
.apx-picker__item[aria-current="true"],
.apx-picker__item.is-active { background: var(--brand-tint); }
.apx-picker__itemtile {
flex: none;
display: flex;
width: 30px;
height: 30px;
border-radius: var(--radius-md);
align-items: center;
justify-content: center;
background: var(--brand-tint);
color: var(--apx-accent, var(--brand));
}
.apx-picker__itemtile svg { width: 16px; height: 16px; }
.apx-picker__itemtile--neutral {
background: var(--surface-canvas);
border: 1px solid var(--border);
color: var(--text-muted);
}
.apx-picker__itemtile--neutral svg { width: 15px; height: 15px; }
.apx-picker__text { flex: 1; min-width: 0; }
.apx-picker__name {
display: block;
font-size: 13.5px;
font-weight: var(--fw-semibold);
color: var(--text-strong);
}
.apx-picker__tag {
display: block;
font-size: 11.5px;
color: var(--text-hint);
}
.apx-picker__check { width: 15px; height: 15px; color: var(--brand-active); flex: none; }
.apx-picker__all {
font-size: 13.5px;
font-weight: var(--fw-medium);
color: var(--text-body);
}
.apx-picker__divider {
height: 1px;
background: var(--divider);
margin: 6px 4px;
border: 0;
}
.apx-picker-wrap > details > summary { list-style: none; cursor: pointer; }
.apx-picker-wrap > details > summary::-webkit-details-marker { display: none; }
.apx-picker-wrap > details[open] .apx-picker__chev { transform: rotate(180deg); }
.apx-picker-wrap > details[open] .apx-picker__menu { display: block; }
.apx-aud {
display: flex;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
flex: 0 1 auto;
min-width: 0;
}
.apx-sidebar .apx-aud { display: none; }
.apx-aud__seg {
height: 30px;
padding: 0 14px;
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
font-family: inherit;
font-size: 12.5px;
font-weight: var(--fw-semibold);
white-space: nowrap;
background: transparent;
color: var(--text-muted);
text-decoration: none;
display: inline-flex;
align-items: center;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
transition: background var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
.apx-aud__seg:hover { color: var(--text-body); }
.apx-aud__seg[aria-current="page"],
.apx-aud__seg.is-active {
background: var(--brand-active);
color: #fff;
}
.apx-search-btn {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: 9px;
min-width: 230px;
flex: 0 1 auto;
padding: 0 12px;
background: var(--surface-canvas);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
color: var(--text-muted);
font-family: inherit;
font-size: 13.5px;
text-decoration: none;
}
.apx-search-btn:hover { border-color: var(--border-strong); }
.apx-search-btn svg { width: 16px; height: 16px; flex: none; }
.apx-search-btn__text {
flex: 1;
text-align: start;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apx-kbd {
font-family: inherit;
direction: ltr;
unicode-bidi: isolate;
font-size: 11px;
font-weight: var(--fw-semibold);
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: 5px;
padding: 1px 6px;
background: #fff;
white-space: nowrap;
}
.apx-lang {
display: flex;
align-items: center;
gap: 7px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
color: var(--text-body);
font-family: inherit;
font-size: 13.5px;
font-weight: var(--fw-medium);
flex: none;
white-space: nowrap;
text-decoration: none;
}
.apx-lang:hover { background: var(--surface-canvas); }
.apx-lang svg { width: 17px; height: 17px; }
.apx-cta {
display: flex;
align-items: center;
gap: 7px;
padding: 0 16px;
background: var(--brand-active);
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
color: #fff;
font-family: inherit;
font-size: 13.5px;
font-weight: var(--fw-semibold);
flex: none;
white-space: nowrap;
text-decoration: none;
}
.apx-cta:hover { background: var(--brand-active-hover); }
.apx-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: none;
padding: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
color: var(--text-body);
}
.apx-menu-btn:hover { background: var(--surface-canvas); }
.apx-menu-btn svg { width: 18px; height: 18px; }
.apx-layout {
display: flex;
align-items: flex-start;
}
.apx-sidebar {
flex: none;
width: var(--apx-sidebar-w);
align-self: stretch;
min-height: calc(100vh - var(--apx-pane-top));
position: sticky;
top: var(--apx-pane-top);
max-height: calc(100vh - var(--apx-pane-top));
overflow: auto;
background: #fff;
border-inline-end: 1px solid var(--border);
padding: 14px 10px 40px;
}
.apx-sidebar__nav { display: block; }
.apx-sidebar__group {
margin: 14px 12px 6px;
font-size: var(--fs-micro);
font-weight: var(--fw-semibold);
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-hint);
}
.apx-sidebar__item {
display: flex;
align-items: center;
gap: 10px;
margin: 1px 6px;
padding: 8px 14px;
border-radius: var(--radius-pill);
text-decoration: none;
font-size: 14px;
white-space: nowrap;
color: var(--text-body);
}
.apx-sidebar__item:hover { background: var(--surface-canvas); }
.apx-sidebar__item span:first-child,
.apx-sidebar__label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
text-align: start;
}
.apx-sidebar__item[aria-current="page"],
.apx-sidebar__item.is-active {
color: var(--brand-active);
background: var(--brand-tint);
font-weight: var(--fw-semibold);
}
.apx-sidebar__item--soon .apx-sidebar__label { opacity: .6; }
.apx-sidebar__item--soon .apx-pill--soon {
opacity: 1;
color: var(--brand-active);
border-color: var(--orange-200);
background: transparent;
}
.apx-sidebar__close {
display: none;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 2px 6px 8px;
margin-inline-start: auto;
padding: 0;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
color: var(--text-muted);
cursor: pointer;
}
.apx-sidebar__close svg { width: 16px; height: 16px; }
.apx-main {
flex: 1;
min-width: 0;
padding: 34px 44px 80px;
max-width: var(--apx-main-max);
}
.apx-toc {
flex: none;
width: var(--apx-toc-w);
align-self: stretch;
position: sticky;
top: var(--apx-pane-top);
max-height: calc(100vh - var(--apx-pane-top));
overflow: auto;
padding: 36px 22px;
}
.apx-toc__title {
font-size: var(--fs-micro);
font-weight: var(--fw-semibold);
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-hint);
margin-bottom: 14px;
}
.apx-toc__list {
display: flex;
flex-direction: column;
gap: 2px;
border-inline-start: 1px solid var(--border);
margin: 0;
padding: 0;
list-style: none;
}
.apx-toc__item {
text-decoration: none;
display: block;
font-size: 13px;
line-height: 1.4;
padding: 6px 14px;
margin-inline-start: -1px;
border-inline-start: 2px solid transparent;
color: var(--text-muted);
font-weight: var(--fw-regular);
}
.apx-toc__item:hover { color: var(--text-body); }
.apx-toc__item.is-active,
.apx-toc__item[aria-current="true"] {
border-inline-start-color: var(--brand);
color: var(--brand-active);
font-weight: var(--fw-semibold);
}
.apx-toc__item--sub { padding-inline-start: 26px; }
.apx-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
margin-bottom: 18px;
flex-wrap: wrap;
}
.apx-breadcrumb a { white-space: nowrap; text-decoration: none; color: var(--text-muted); }
.apx-breadcrumb a:hover { color: var(--brand-active); }
.apx-breadcrumb__sep { color: var(--text-hint); }
.apx-breadcrumb__sep::after { content: "\203A"; }
[dir="rtl"] .apx-breadcrumb__sep::after { content: "\2039"; }
.apx-breadcrumb [aria-current="page"] { color: var(--text-body); }
.apx-article__title {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 34px;
line-height: var(--lh-tight);
letter-spacing: -.5px;
color: var(--text-strong);
margin: 0 0 14px;
}
.apx-article__lead {
font-size: 16.5px;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 14px;
max-width: 680px;
}
.apx-article__meta {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 24px;
margin-bottom: 30px;
border-bottom: 1px solid var(--divider);
font-size: 13px;
color: var(--text-hint);
flex-wrap: wrap;
}
.apx-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--brand-tint);
color: var(--brand-active);
font-weight: var(--fw-semibold);
padding: 3px 11px;
border-radius: var(--radius-pill);
font-size: var(--fs-caption);
}
.apx-pill--soon,
.apx-pill--stale {
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 9.5px;
font-weight: var(--fw-semibold);
padding: 1px 6px;
text-transform: uppercase;
letter-spacing: .4px;
}
[dir="rtl"] .apx-pill--soon,
[dir="rtl"] .apx-pill--stale { text-transform: none; letter-spacing: normal; }
.apx-pill--stale { color: var(--amber-500); border-color: var(--amber-200); background: var(--amber-50); }
.apx-pill--beta {
background: var(--amber-50);
border: 1px solid var(--amber-200);
color: #8a5a00;
font-size: var(--fs-micro);
font-weight: var(--fw-bold);
letter-spacing: .4px;
text-transform: uppercase;
padding: 3px 10px;
}
[dir="rtl"] .apx-pill--beta { text-transform: none; letter-spacing: normal; }
.apx-copymd {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: 7px;
height: 30px;
padding: 0 13px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
font-family: inherit;
font-size: 12.5px;
font-weight: var(--fw-medium);
color: var(--text-muted);
white-space: nowrap;
}
.apx-copymd:hover { background: var(--surface-canvas); }
.apx-copymd svg { width: 13px; height: 13px; }
.apx-copymd.is-copied { color: var(--positive); border-color: var(--positive); }
.apx-section {
scroll-margin-top: 120px;
margin-bottom: 34px;
}
.apx-section > h2 {
font-size: var(--fs-h2);
font-weight: var(--fw-semibold);
color: var(--text-strong);
margin: 0 0 12px;
letter-spacing: -.2px;
display: flex;
align-items: baseline;
gap: 9px;
}
.apx-section > h3 {
font-size: 17px;
font-weight: var(--fw-semibold);
color: var(--text-strong);
margin: 24px 0 10px;
display: flex;
align-items: baseline;
gap: 9px;
}
.apx-heading {
display: flex;
align-items: baseline;
gap: 9px;
color: var(--text-strong);
font-weight: var(--fw-semibold);
}
.apx-heading__text { min-width: 0; }
.apx-heading--h2 { font-size: var(--fs-h2); margin: 0 0 12px; letter-spacing: -.2px; }
.apx-heading--h3 { font-size: 17px; margin: 24px 0 10px; }
.apx-heading--h4 { font-size: 15px; margin: 20px 0 8px; }
.apx-anchor {
text-decoration: none;
color: #c9ccd1;
font-size: var(--fs-base);
font-weight: var(--fw-medium);
}
.apx-anchor:hover { color: var(--brand-active); }
.apx-section p {
font-size: var(--fs-base);
line-height: 1.7;
color: var(--text-body);
margin: 0 0 14px;
}
.apx-section ul,
.apx-section ol {
margin: 0 0 14px;
padding-inline-start: 22px;
font-size: var(--fs-base);
line-height: 1.9;
color: var(--text-body);
}
.apx-section li + li { margin-top: 2px; }
.apx-section a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--orange-200); }
.apx-section a:hover { color: var(--brand-active); border-bottom-color: var(--brand); }
.apx-link--external::after {
content: "↗";
display: inline-block;
margin-inline-start: .25em;
font-size: .82em;
line-height: 1;
vertical-align: baseline;
color: var(--text-hint);
unicode-bidi: isolate;
}
.apx-link--external:hover::after { color: var(--brand-active); }
.apx-section hr { border: 0; border-top: 1px solid var(--divider); margin: 26px 0; }
.apx-section blockquote {
margin: 0 0 14px;
padding: 2px 0 2px 16px;
padding-inline-start: 16px;
padding-inline-end: 0;
border-inline-start: 3px solid var(--brand-tint-2);
color: var(--text-muted);
}
.apx-article { min-width: 0; }
.apx-article > :last-child { margin-bottom: 0; }
.apx-steps {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: #fff;
overflow: hidden;
margin: 0 0 14px;
padding: 0;
list-style: none;
counter-reset: apxstep;
}
.apx-steps__item {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 13px 16px;
border-bottom: 1px solid var(--divider);
font-size: 14.5px;
line-height: 1.65;
color: var(--text-body);
}
.apx-steps__item:last-child { border-bottom: 0; }
.apx-steps__n {
flex: none;
display: flex;
width: 24px;
height: 24px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--brand-tint);
color: var(--brand-active);
font-size: 12.5px;
font-weight: var(--fw-semibold);
margin-top: 1px;
}
.apx-steps__body { min-width: 0; }
.apx-steps__body > :first-child { margin-top: 0; }
.apx-steps__body > :last-child { margin-bottom: 0; }
.apx-steps__body p { font-size: 14.5px; line-height: 1.65; margin: 0 0 8px; }
.apx-table {
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
overflow-x: auto;
margin: 0 0 14px;
background: #fff;
}
.apx-table table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
background: #fff;
}
.apx-table th {
text-align: start;
padding: 10px 16px;
font-weight: var(--fw-semibold);
color: var(--text-muted);
background: var(--surface-canvas);
border-bottom: 1px solid var(--border);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: .4px;
white-space: nowrap;
}
.apx-table td {
padding: 11px 16px;
color: var(--text-body);
text-align: start;
border-bottom: 1px solid var(--divider);
vertical-align: top;
}
.apx-table tbody tr:last-child td { border-bottom: 0; }
.apx-table--mono td:nth-child(1),
.apx-table--mono td:nth-child(2),
.apx-table td.mono,
.apx-table .mono {
font-family: var(--font-mono);
font-size: 12.5px;
direction: ltr;
unicode-bidi: isolate;
text-align: left;
}
.apx-table--mono td:nth-child(1) {
color: var(--text-strong);
font-weight: var(--fw-medium);
white-space: nowrap;
}
.apx-table--mono td:nth-child(2) { color: var(--grey-700); }
.apx-callout {
display: flex;
gap: 12px;
padding: 14px 16px;
border-radius: var(--radius-md);
margin: 0 0 14px;
background: var(--grey-50);
border: 1px solid var(--grey-300);
}
.apx-callout__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--grey-600); }
.apx-callout__body { min-width: 0; }
.apx-callout__title {
font-size: 14px;
font-weight: var(--fw-semibold);
color: var(--text-strong);
margin: 0 0 4px;
}
.apx-callout p {
margin: 0 0 6px;
font-size: 14px;
line-height: 1.65;
color: var(--grey-700);
}
.apx-callout p:last-child { margin-bottom: 0; }
.apx-callout--info { background: var(--grey-50); border-color: var(--grey-300); }
.apx-callout--info .apx-callout__icon { color: var(--grey-600); }
.apx-callout--tip { background: var(--positive-bg); border-color: rgba(24,128,56,.28); }
.apx-callout--tip .apx-callout__icon { color: var(--positive); }
.apx-callout--warning { background: var(--amber-50); border-color: var(--amber-200); }
.apx-callout--warning .apx-callout__icon { color: #cf821d; }
.apx-callout--danger { background: var(--negative-bg); border-color: rgba(217,48,37,.28); }
.apx-callout--danger .apx-callout__icon { color: var(--negative); }
.apx-code {
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
background: #fff;
margin: 0 0 14px;
}
.apx-code__tabs {
display: flex;
align-items: center;
gap: 2px;
padding: 8px 10px;
background: var(--surface-canvas);
border-bottom: 1px solid var(--divider);
}
.apx-code__label {
font-size: var(--fs-micro);
font-weight: var(--fw-semibold);
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-hint);
margin-inline-end: 8px;
}
.apx-code__tab {
border: none;
cursor: pointer;
font-family: inherit;
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
color: var(--text-muted);
background: transparent;
padding: 5px 11px;
border-radius: var(--radius-sm);
}
.apx-code__tab:hover { color: var(--text-body); }
.apx-code__tab[aria-selected="true"],
.apx-code__tab.is-active {
background: #fff;
color: var(--brand-active);
box-shadow: var(--shadow-card);
}
.apx-code__copy {
margin-inline-start: auto;
border: none;
background: transparent;
cursor: pointer;
color: var(--text-muted);
display: flex;
padding: 5px;
border-radius: var(--radius-sm);
}
.apx-code__copy:hover { background: rgba(0,0,0,.05); color: var(--text-body); }
.apx-code__copy svg { width: 15px; height: 15px; }
.apx-code__copy.is-copied { color: var(--positive); }
.apx-code__panel[hidden] { display: none; }
.apx-code pre {
margin: 0;
padding: 16px;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.7;
color: var(--grey-900);
background: #fff;
white-space: pre;
overflow-x: auto;
direction: ltr;
unicode-bidi: isolate;
text-align: left;
}
.apx-code--dark { border-color: transparent; background: var(--ink-800); box-shadow: var(--shadow-raised); }
.apx-code--dark .apx-code__tabs { background: transparent; border-bottom-color: rgba(255,255,255,.1); }
.apx-code--dark .apx-code__label { color: rgba(255,255,255,.5); }
.apx-code--dark .apx-code__tab { color: rgba(255,255,255,.6); }
.apx-code--dark .apx-code__tab:hover { color: #fff; }
.apx-code--dark .apx-code__tab[aria-selected="true"],
.apx-code--dark .apx-code__tab.is-active {
background: rgba(255,255,255,.12);
color: #fff;
box-shadow: none;
}
.apx-code--dark .apx-code__copy { color: rgba(255,255,255,.6); }
.apx-code--dark .apx-code__copy:hover { background: rgba(255,255,255,.1); color: #fff; }
.apx-code--dark .apx-code__copy.is-copied { color: var(--positive); }
.apx-code--dark pre { background: transparent; color: var(--grey-200); }
.apx-code--dark .apx-code__pre--ok { color: #9fe2b4; }
.apx-code--bare .apx-code__tabs { justify-content: flex-end; }
.apx-section .apx-kbd { padding: 2px 7px; }
.apx-kbd--inline { display: inline-block; vertical-align: baseline; }
.apx-faq {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: #fff;
overflow: hidden;
}
.apx-faq__item { border-bottom: 1px solid var(--divider); }
.apx-faq__item:last-child { border-bottom: 0; }
.apx-faq__q {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 15px 18px;
border: none;
background: transparent;
cursor: pointer;
font-family: inherit;
text-align: start;
font-size: 14.5px;
font-weight: var(--fw-semibold);
color: var(--text-strong);
list-style: none;
}
.apx-faq__q::-webkit-details-marker { display: none; }
.apx-faq__q::marker { content: ""; }
.apx-faq__q > span { flex: 1; }
.apx-faq__chev {
width: 16px;
height: 16px;
flex: none;
color: var(--text-hint);
transition: transform var(--dur-base) var(--ease-standard);
}
.apx-faq__item[open] .apx-faq__chev { transform: rotate(180deg); }
.apx-faq__a {
margin: 0;
padding: 0 18px 16px;
font-size: 14px;
line-height: 1.7;
color: var(--text-muted);
max-width: 640px;
}
.apx-faq__a p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; }
.apx-faq__a p:last-child { margin-bottom: 0; }
.apx-related {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.apx-related__card {
display: block;
padding: 16px 18px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
text-decoration: none;
background: #fff;
transition: border-color var(--dur-base) var(--ease-standard);
}
.apx-related__card:hover { border-color: var(--brand); }
.apx-related__title {
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--brand-active);
margin-bottom: 4px;
}
.apx-related__desc {
font-size: 13.5px;
color: var(--text-muted);
line-height: var(--lh-normal);
}
.apx-devlink {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border-radius: var(--radius-lg);
background: var(--ink-800);
text-decoration: none;
margin-bottom: 36px;
}
.apx-devlink__tile {
flex: none;
display: flex;
width: 34px;
height: 34px;
border-radius: 9px;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.08);
color: var(--amber-300);
}
.apx-devlink__tile svg { width: 17px; height: 17px; }
.apx-devlink__text { flex: 1; min-width: 0; }
.apx-devlink__title {
display: block;
font-size: 14.5px;
font-weight: var(--fw-semibold);
color: #fff;
}
.apx-devlink__sub {
display: block;
font-size: 12.5px;
color: rgba(255,255,255,.65);
}
.apx-devlink__arrow { color: var(--amber-300); font-weight: var(--fw-semibold); font-size: 14px; }
.apx-feedback {
padding-top: 24px;
border-top: 1px solid var(--divider);
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.apx-feedback__q {
font-size: 14px;
font-weight: var(--fw-medium);
color: var(--text-body);
}
.apx-feedback__btn {
display: flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 16px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
font-family: inherit;
font-size: 13.5px;
font-weight: var(--fw-medium);
color: var(--text-body);
}
.apx-feedback__btn:hover { background: var(--surface-canvas); }
.apx-feedback__btn svg { width: 15px; height: 15px; }
.apx-feedback__btn.is-chosen { border-color: var(--brand); color: var(--brand-active); }
.apx-feedback__thanks {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: var(--fw-medium);
color: var(--positive);
}
.apx-feedback__thanks[hidden] { display: none; }
.apx-feedback__thanks svg { width: 17px; height: 17px; }
.apx-feedback__note {
flex-basis: 100%;
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 4px;
}
.apx-feedback__note[hidden] { display: none; }
.apx-feedback__input {
flex: 1;
min-width: 0;
min-height: 38px;
padding: var(--pad-input);
font-family: inherit;
font-size: 13.5px;
color: var(--text-body);
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
resize: vertical;
}
.apx-feedback__send {
height: 38px;
padding: 0 16px;
flex: none;
background: var(--brand-active);
border: none;
border-radius: var(--radius-pill);
color: #fff;
font-family: inherit;
font-size: 13.5px;
font-weight: var(--fw-semibold);
cursor: pointer;
}
.apx-feedback__send:hover { background: var(--brand-active-hover); }
.apx-shot {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
background: #fff;
margin: 0 0 20px;
}
.apx-shot__chrome {
height: 38px;
background: var(--surface-canvas);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
padding: 0 12px;
}
.apx-shot__dots {
flex: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: #ff5f57;
box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840;
margin-inline-end: 30px;
}
[dir="rtl"] .apx-shot__dots {
box-shadow: -15px 0 0 #febc2e, -30px 0 0 #28c840;
}
.apx-shot__url {
flex: 1;
min-width: 0;
height: 26px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--fs-caption);
color: var(--grey-700);
text-decoration: none;
display: flex;
align-items: center;
gap: 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: ltr;
unicode-bidi: isolate;
text-align: left;
}
.apx-shot__url:hover { border-color: var(--brand); color: var(--brand-active); }
.apx-shot__lock { width: 12px; height: 12px; flex: none; color: var(--text-hint); }
.apx-shot__out {
width: 12px;
height: 12px;
flex: none;
color: var(--text-hint);
margin-inline-start: auto;
}
.apx-shot__urltext { overflow: hidden; text-overflow: ellipsis; }
.apx-shot img { display: block; width: 100%; height: auto; }
.apx-shot__caption {
font-size: 12.5px;
color: var(--text-hint);
padding: 9px 12px 11px;
text-align: start;
line-height: 1.55;
}
.apx-shot--stale .apx-shot__chrome .apx-pill--stale { flex: none; }
.apx-shot--missing .apx-shot__chrome {
border-bottom-style: dashed;
}
.apx-shot--missing::after {
content: "";
display: block;
min-height: 96px;
background:
repeating-linear-gradient(
45deg,
var(--surface-canvas) 0 10px,
var(--grey-100) 10px 20px
);
}
.apx-shot--missing .apx-shot__caption { color: var(--text-muted); }
.apx-page { background: #fff; }
.apx-hero {
position: relative;
background: var(--ink-800);
color: #fff;
padding: 62px 24px 72px;
overflow: hidden;
}
.apx-hero__mark {
position: absolute;
inset-inline-end: -60px;
top: -40px;
opacity: .16;
pointer-events: none;
}
.apx-hero__mark svg,
.apx-hero__mark img { width: 320px; height: 277px; }
.apx-hero__inner {
max-width: 760px;
margin: 0 auto;
position: relative;
text-align: center;
}
.apx-hero__eyebrow {
display: inline-block;
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--amber-300);
margin-bottom: 18px;
}
.apx-hero__title {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-display);
line-height: 1.12;
letter-spacing: var(--tracking-display);
margin: 0 0 18px;
color: #fff;
}
.apx-hero__sub {
font-size: 17px;
line-height: 1.65;
color: rgba(255,255,255,.72);
margin: 0 auto 28px;
max-width: 620px;
}
.apx-hero__search {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 520px;
margin: 0 auto;
height: 52px;
padding: 0 18px;
background: #fff;
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
box-shadow: var(--shadow-menu);
color: var(--text-muted);
font-family: inherit;
font-size: var(--fs-base);
text-decoration: none;
}
.apx-hero__search svg { width: 19px; height: 19px; }
.apx-hero__search span:not(.apx-kbd) { flex: 1; text-align: start; }
.apx-hero__search .apx-kbd {
font-size: var(--fs-caption);
color: var(--text-hint);
border-radius: var(--radius-sm);
padding: 2px 8px;
background: transparent;
}
.apx-hero__chips {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 22px;
font-size: 13.5px;
color: rgba(255,255,255,.6);
}
.apx-hero__chip {
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.06);
color: #fff;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: var(--fw-medium);
padding: 5px 14px;
border-radius: var(--radius-pill);
text-decoration: none;
}
.apx-hero__chip:hover { background: rgba(255,255,255,.14); }
.apx-shell {
max-width: var(--apx-shell-max);
margin: 0 auto;
padding: 54px 24px 20px;
}
.apx-shell--tail { padding: 34px 24px 64px; }
.apx-h2 {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 26px;
color: var(--text-strong);
margin: 0 0 24px;
letter-spacing: -.3px;
}
.apx-sechead {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.apx-sechead .apx-h2 { margin: 0; }
.apx-prodgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.apx-prodcard {
display: flex;
flex-direction: column;
padding: 22px 22px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.apx-prodcard:hover { box-shadow: var(--shadow-raised); border-color: #c9ccd1; }
.apx-prodcard__link { display: block; text-decoration: none; }
.apx-prodcard__tile {
display: flex;
width: 44px;
height: 44px;
border-radius: 11px;
align-items: center;
justify-content: center;
background: var(--brand-tint);
color: var(--apx-accent, var(--brand));
margin-bottom: 16px;
}
.apx-prodcard__tile svg { width: 23px; height: 23px; }
.apx-prodcard__tag {
display: block;
font-size: var(--fs-micro);
font-weight: var(--fw-semibold);
letter-spacing: .4px;
text-transform: uppercase;
color: var(--text-hint);
margin-bottom: 6px;
}
.apx-prodcard__name {
display: block;
font-size: 17px;
font-weight: var(--fw-semibold);
color: var(--text-strong);
margin-bottom: 7px;
}
.apx-prodcard__desc {
display: block;
font-size: 14px;
line-height: 1.55;
color: var(--text-muted);
}
.apx-prodcard__foot {
display: flex;
gap: 18px;
margin-top: 16px;
padding-top: 13px;
border-top: 1px solid var(--divider);
}
.apx-prodcard__foot a {
font-size: 13px;
font-weight: var(--fw-semibold);
text-decoration: none;
color: var(--text-muted);
}
.apx-prodcard__foot a:first-child { color: var(--brand-active); }
.apx-prodcard__foot a:hover { color: var(--brand-active); }
.apx-featured {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
background: #fff;
box-shadow: var(--shadow-card);
}
.apx-featured__row {
display: flex;
align-items: center;
gap: 16px;
padding: 17px 22px;
text-decoration: none;
border-bottom: 1px solid var(--divider);
}
.apx-featured__row:last-child { border-bottom: 0; }
.apx-featured__row:hover { background: var(--surface-canvas); }
.apx-featured__tile {
flex: none;
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--brand-tint);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-active);
}
.apx-featured__tile svg { width: 17px; height: 17px; }
.apx-featured__text { flex: 1; min-width: 0; }
.apx-featured__title {
display: block;
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--text-strong);
}
.apx-featured__cat { display: block; font-size: 12.5px; color: var(--text-hint); }
.apx-featured__time { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.apx-featured__chev { color: var(--text-hint); width: 16px; height: 16px; }
.apx-checklist,
.apx-prodguides {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-card);
overflow: hidden;
}
.apx-card .apx-checklist,
.apx-card .apx-prodguides { border: 0; border-radius: 0; box-shadow: none; }
.apx-prodhome {
max-width: 1000px;
margin: 0 auto;
padding: 38px 32px 80px;
}
.apx-prodhead {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 34px;
}
.apx-prodhead__tile {
display: flex;
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
align-items: center;
justify-content: center;
background: var(--brand-tint);
color: var(--apx-accent, var(--brand));
flex: none;
}
.apx-prodhead__tile svg { width: 28px; height: 28px; }
.apx-prodhead__title {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 32px;
line-height: var(--lh-tight);
letter-spacing: -.5px;
color: var(--text-strong);
margin: 0 0 4px;
}
.apx-prodhead__tagline { font-size: 16px; color: var(--text-muted); margin: 0; }
.apx-prodcols {
display: grid;
grid-template-columns: 1fr 320px;
gap: 20px;
align-items: start;
}
.apx-prodcols__main,
.apx-prodcols__side {
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.apx-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-card);
overflow: hidden;
}
.apx-card__head {
padding: 16px 20px;
border-bottom: 1px solid var(--divider);
font-size: 14px;
font-weight: var(--fw-semibold);
color: var(--text-strong);
}
.apx-checklist__row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-bottom: 1px solid var(--divider);
text-decoration: none;
}
.apx-checklist__row:last-child { border-bottom: 0; }
.apx-checklist__row:hover { background: var(--surface-canvas); }
.apx-checklist__n {
flex: none;
display: flex;
width: 26px;
height: 26px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--brand-tint);
color: var(--brand-active);
font-size: 13px;
font-weight: var(--fw-semibold);
}
.apx-checklist__text { flex: 1; font-size: 14.5px; color: var(--text-body); }
.apx-checklist__chev { color: var(--text-hint); width: 16px; height: 16px; }
.apx-prodguides__row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-bottom: 1px solid var(--divider);
text-decoration: none;
}
.apx-prodguides__row:last-child { border-bottom: 0; }
.apx-prodguides__row:hover { background: var(--surface-canvas); }
.apx-prodguides__tile {
flex: none;
width: 30px;
height: 30px;
border-radius: var(--radius-md);
background: var(--brand-tint);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-active);
}
.apx-prodguides__tile svg { width: 15px; height: 15px; }
.apx-prodguides__title {
flex: 1;
font-size: 14.5px;
font-weight: var(--fw-medium);
color: var(--text-strong);
min-width: 0;
}
.apx-prodguides__time { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.apx-prodguides__chev { color: var(--text-hint); width: 16px; height: 16px; }
.apx-devcard {
border-radius: var(--radius-lg);
background: var(--ink-800);
color: #fff;
padding: 22px;
box-shadow: var(--shadow-card);
}
.apx-devcard__tile {
display: flex;
width: 38px;
height: 38px;
border-radius: 10px;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.08);
color: var(--amber-300);
margin-bottom: 14px;
}
.apx-devcard__tile svg { width: 19px; height: 19px; }
.apx-devcard__title {
font-size: 15.5px;
font-weight: var(--fw-semibold);
margin-bottom: 6px;
color: #fff;
}
.apx-devcard__desc {
font-size: 13.5px;
line-height: 1.6;
color: rgba(255,255,255,.72);
margin-bottom: 16px;
}
.apx-devcard__link {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
font-weight: var(--fw-semibold);
color: var(--amber-300);
text-decoration: none;
}
.apx-help {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-card);
padding: 18px 20px;
}
.apx-help__title {
font-size: 13.5px;
font-weight: var(--fw-semibold);
color: var(--text-strong);
margin-bottom: 5px;
}
.apx-help__desc {
font-size: 13px;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 10px;
}
.apx-help__link {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--brand-active);
text-decoration: none;
}
.apx-footer {
border-top: 1px solid var(--border);
background: var(--surface-canvas);
padding: 20px 24px;
}
.apx-footer__inner {
max-width: var(--apx-shell-max);
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
font-size: 12.5px;
color: var(--text-hint);
}
.apx-footer__links {
margin-inline-start: auto;
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.apx-footer__links a {
color: var(--text-muted);
text-decoration: none;
font-weight: var(--fw-medium);
}
.apx-footer__links a:hover { color: var(--brand-active); }
.apx-footer__links a.apx-mono {
font-family: var(--font-mono);
font-size: var(--fs-caption);
font-weight: var(--fw-regular);
}
.apx-release { margin-bottom: 30px; }
.apx-release__head {
align-items: baseline;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--divider);
}
.apx-release__head .apx-heading__text {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.apx-release__version {
font-family: var(--font-mono);
font-size: 19px;
font-weight: var(--fw-semibold);
color: var(--text-strong);
}
.apx-release__date {
font-size: 12.5px;
font-weight: var(--fw-regular);
color: var(--text-hint);
}
.apx-release__kind {
margin: 18px 0 8px;
font-size: var(--fs-micro);
font-weight: var(--fw-semibold);
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-muted);
}
html[dir="rtl"] .apx-release__kind { letter-spacing: normal; text-transform: none; }
.apx-release__kind--added { color: var(--positive); }
.apx-release__kind--fixed { color: var(--brand-active); }
.apx-release__kind--changed,
.apx-release__kind--improved { color: var(--text-muted); }
.apx-release__list {
list-style: none;
margin: 0 0 6px;
padding: 0;
}
.apx-release__item {
display: flex;
align-items: baseline;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--divider);
font-size: var(--fs-base);
line-height: 1.65;
color: var(--text-body);
}
.apx-release__item:last-child { border-bottom: 0; }
.apx-release__scope {
flex: none;
min-width: 84px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-hint);
text-align: start;
}
.apx-release__text { flex: 1; min-width: 0; }
@media (max-width: 619.98px) {
.apx-release__item { flex-direction: column; gap: 2px; }
.apx-release__scope { min-width: 0; }
}
.apx-search {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(17,17,17,.42);
display: flex;
justify-content: center;
align-items: flex-start;
padding: 84px 12px 24px;
animation: apxFade var(--dur-fast) ease;
}
.apx-search[hidden] { display: none; }
.apx-search__panel {
width: 600px;
max-width: 92vw;
max-height: calc(100vh - 120px);
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-popover);
overflow: hidden;
animation: apxPop 160ms var(--ease-standard);
}
.apx-search__head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--divider);
flex: none;
}
.apx-search__head svg { width: 20px; height: 20px; color: var(--text-hint); }
.apx-search__input {
flex: 1;
min-width: 0;
border: none;
outline: none;
font-family: inherit;
font-size: 16px;
color: var(--text-strong);
background: transparent;
}
.apx-search__esc {
font-size: var(--fs-micro);
font-weight: var(--fw-semibold);
color: var(--text-hint);
border: 1px solid var(--border);
border-radius: 5px;
padding: 2px 7px;
flex: none;
}
.apx-search__results {
max-height: 380px;
overflow: auto;
padding: 8px;
flex: 1;
}
.apx-search__group {
font-size: var(--fs-micro);
font-weight: var(--fw-semibold);
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-hint);
padding: 10px 13px 5px;
}
.apx-search__item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 13px;
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--text-body);
}
.apx-search__item:hover,
.apx-search__item.is-active { background: var(--surface-canvas); }
.apx-search__tile {
flex: none;
width: 30px;
height: 30px;
border-radius: 7px;
background: var(--brand-tint);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-active);
}
.apx-search__tile svg { width: 15px; height: 15px; }
.apx-search__text { flex: 1; min-width: 0; }
.apx-search__title {
display: block;
font-size: 14px;
font-weight: var(--fw-medium);
color: var(--text-strong);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apx-search__meta {
display: block;
font-size: var(--fs-caption);
color: var(--text-hint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apx-search__meta mark,
.apx-search__title mark {
background: var(--brand-tint-2);
color: inherit;
border-radius: 3px;
padding: 0 1px;
}
.apx-search__chev { color: var(--text-hint); width: 16px; height: 16px; }
.apx-search__empty {
padding: 32px;
text-align: center;
color: var(--text-hint);
font-size: 14px;
}
.apx-search__foot {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 18px;
border-top: 1px solid var(--divider);
background: var(--surface-canvas);
font-size: 11.5px;
color: var(--text-hint);
flex: none;
}
.apx-backdrop {
position: fixed;
inset: 0;
z-index: 45;
background: rgba(17,17,17,.42);
animation: apxFade var(--dur-fast) ease;
}
.apx-backdrop[hidden] { display: none; }
.apx-clickaway {
position: fixed;
inset: 0;
z-index: 35;
}
.apx-clickaway[hidden] { display: none; }
body.apx-noscroll { overflow: hidden; }
.apx-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.apx-layout--api { display: flex; align-items: flex-start; }
.apx-verpicker {
margin: 4px 10px 12px;
display: flex;
align-items: center;
gap: 2px;
padding: 3px;
background: var(--surface-canvas);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
}
.apx-verpicker__seg {
flex: 1;
height: 26px;
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
font-family: inherit;
font-size: 11.5px;
font-weight: var(--fw-semibold);
white-space: nowrap;
background: transparent;
color: var(--text-muted);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.apx-verpicker__seg[aria-current="page"],
.apx-verpicker__seg.is-active { background: #fff; color: var(--brand-active); box-shadow: var(--shadow-card); }
.apx-api__head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 14px;
}
.apx-api__title {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-kpi);
line-height: var(--lh-tight);
letter-spacing: -.4px;
color: var(--text-strong);
margin: 0;
}
.apx-api__lead {
font-size: var(--fs-base);
line-height: 1.7;
color: var(--text-body);
margin: 0 0 32px;
max-width: 620px;
}
.apx-endpoint {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
padding: 11px 14px;
background: var(--surface-canvas);
border: 1px solid var(--border);
border-radius: var(--radius-md);
direction: ltr;
unicode-bidi: isolate;
overflow-x: auto;
}
.apx-endpoint__method {
font-family: var(--font-ui);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
letter-spacing: .5px;
color: #fff;
background: var(--positive);
padding: 4px 10px;
border-radius: var(--radius-sm);
flex: none;
}
.apx-endpoint__method--post { background: var(--positive); }
.apx-endpoint__method--get { background: var(--series-3); }
.apx-endpoint__method--put,
.apx-endpoint__method--patch { background: var(--amber-500); }
.apx-endpoint__method--delete { background: var(--negative); }
.apx-endpoint__path {
font-family: var(--font-mono);
font-size: 13.5px;
color: var(--grey-900);
word-break: break-all;
background: none;
border: 0;
padding: 0;
}
.apx-subhead {
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--text-strong);
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--divider);
}
.apx-params { margin-bottom: 30px; }
.apx-param { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.apx-param:last-child { border-bottom: 0; }
.apx-param__row {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 5px;
}
.apx-param__name {
font-family: var(--font-mono);
font-size: 13.5px;
font-weight: var(--fw-medium);
color: var(--text-strong);
background: none;
border: 0;
padding: 0;
}
.apx-param__type {
font-family: var(--font-mono);
font-size: var(--fs-caption);
color: var(--text-hint);
direction: ltr;
unicode-bidi: isolate;
}
.apx-param__req {
font-size: var(--fs-micro);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: .3px;
color: var(--text-hint);
}
[dir="rtl"] .apx-param__req { text-transform: none; letter-spacing: normal; }
.apx-param__req--required { color: var(--negative); }
.apx-param__desc { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.apx-userlink {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
text-decoration: none;
background: #fff;
font-size: 13.5px;
font-weight: var(--fw-semibold);
color: var(--brand-active);
}
.apx-userlink:hover { background: var(--brand-tint); }
.apx-userlink svg { width: 15px; height: 15px; }
.apx-rail {
flex: none;
width: 420px;
align-self: stretch;
position: sticky;
top: var(--apx-pane-top);
max-height: calc(100vh - var(--apx-pane-top));
overflow: auto;
padding: 24px 24px 40px;
background: var(--surface-canvas);
border-inline-start: 1px solid var(--border);
}
.apx-rail__label {
font-size: var(--fs-micro);
font-weight: var(--fw-semibold);
letter-spacing: .5px;
text-transform: uppercase;
color: rgba(255,255,255,.5);
margin-inline-end: 8px;
}
.apx-rail__resp { margin-top: 16px; }
.apx-rail__status {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.apx-rail__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green-500);
flex: none;
}
.apx-rail__code {
margin-inline-start: auto;
font-family: var(--font-mono);
font-size: var(--fs-micro);
color: rgba(255,255,255,.62);
direction: ltr;
unicode-bidi: isolate;
}
@media (max-width: 1179.98px) {
.apx-toc { display: none; }
}
@media (max-width: 1079.98px) {
.apx-layout--api { flex-direction: column; align-items: stretch; }
.apx-layout--api .apx-sidebar { display: none; }
.apx-layout--api .apx-main { max-width: none; }
.apx-rail {
position: static;
width: auto;
max-height: none;
border-inline-start: none;
border-top: 1px solid var(--border);
}
}
@media (max-width: 999.98px) {
.apx-prodgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899.98px) {
.apx-cta { display: none; }
.apx-prodcols { grid-template-columns: 1fr; }
}
@media (max-width: 879.98px) {
.apx-menu-btn { display: flex; }
.apx-sidebar__close { display: flex; }
html, body.apx { overflow-x: clip; }
.apx-header__bar .apx-aud { display: none; }
.apx-sidebar .apx-aud {
display: flex;
margin: 2px 6px 10px;
justify-content: center;
}
.apx-sidebar .apx-aud__seg { flex: 1; justify-content: center; }
.apx-sidebar {
position: fixed;
top: 0;
bottom: 0;
inset-inline-start: 0;
z-index: 50;
width: min(300px, 86vw);
max-height: none;
min-height: 0;
padding: 14px 10px 40px;
box-shadow: var(--shadow-drawer);
border-inline-end: 1px solid var(--border);
transform: translateX(-101%);
transition: transform var(--dur-slow) var(--ease-standard);
visibility: hidden;
}
.apx-sidebar.is-open { transform: none; visibility: visible; }
.apx-layout--api .apx-sidebar { display: block; }
html[dir="rtl"] .apx-sidebar { transform: translateX(101%); }
html[dir="rtl"] .apx-sidebar.is-open { transform: none; visibility: visible; }
.apx-main { max-width: none; }
}
@media (max-width: 1149.98px) {
.apx-search-btn { min-width: 150px; }
}
@media (max-width: 759.98px) {
.apx-search-btn { min-width: 40px; flex: 1 1 40px; padding: 0 11px; }
.apx-search-btn__text { display: none; }
.apx-search-btn .apx-kbd { display: none; }
.apx-brand__sep,
.apx-brand__label { display: none; }
}
@media (max-width: 699.98px) {
.apx-shell { padding: 40px 18px 20px; }
.apx-shell--tail { padding: 28px 18px 56px; }
.apx-footer { padding: 18px 18px; }
}
@media (max-width: 679.98px) {
.apx-header__bar { gap: 10px; padding: 0 14px; }
.apx-main { padding: 26px 18px 64px; }
.apx-prodhome { padding: 26px 18px 64px; }
.apx-hero { padding: 44px 18px 52px; }
.apx-hero__title { font-size: 30px; }
.apx-hero__sub { font-size: var(--fs-base); }
.apx-hero__mark svg,
.apx-hero__mark img { width: 220px; height: 190px; }
.apx-article__title { font-size: 28px; }
.apx-article__lead { font-size: var(--fs-base); }
.apx-api__title { font-size: 25px; }
.apx-prodhead__title { font-size: 26px; }
.apx-h2 { font-size: 22px; }
.apx-shot__caption { padding: 8px 10px 10px; }
}
@media (min-width: 680px) and (max-width: 1023.98px) {
.apx-hero__title { font-size: 38px; }
}
@media (max-width: 639.98px) {
.apx-prodgrid { grid-template-columns: 1fr; }
}
@media (max-width: 619.98px) {
.apx-related { grid-template-columns: 1fr; }
.apx-picker__label { display: none; }
.apx-picker { padding: 0 10px; }
}
@media (max-width: 519.98px) {
.apx-lang span { display: none; }
.apx-lang { padding: 0 11px; }
.apx-article__meta { gap: 10px; }
.apx-copymd { margin-inline-start: 0; }
}
@media print {
.apx-header, .apx-sidebar, .apx-toc, .apx-search, .apx-backdrop,
.apx-feedback, .apx-menu-btn { display: none !important; }
.apx-main { max-width: none; padding: 0; }
body.apx { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.apx-sidebar { transition: none; }
}
@media (forced-colors: active) {
.apx-sidebar__item[aria-current="page"],
.apx-toc__item.is-active { forced-color-adjust: none; }
.apx-code--dark, .apx-devlink, .apx-devcard, .apx-hero { forced-color-adjust: none; }
}