/* Website material layer; web glass, not Apple's native Liquid Glass. */
:root {
  --reflection: #448ead;
  --sidebar-width: 232px;
  --edge-radius: 8px;
}
:root[data-theme="light"] { --muted: #535f64; }
:root[data-palette="jade"], .palette-preview[data-palette="jade"] {
  --page: #eaf4ef; --surface: #f8fcfa; --surface-hover: #d7eade; --line: #b7cdc1;
  --accent: #11614f; --accent-hover: #094738; --accent-soft: #d7ece3; --reflection: #4886ab;
}
:root[data-palette="azure"], .palette-preview[data-palette="azure"] {
  --page: #e8f0fc; --surface: #f8faff; --surface-hover: #d6e4f7; --line: #b5c7e0;
  --accent: #2556a1; --accent-hover: #173f7e; --accent-soft: #dbe7fa; --reflection: #279083;
}
:root[data-palette="rose"], .palette-preview[data-palette="rose"] {
  --page: #f9e9ef; --surface: #fff8fb; --surface-hover: #f0d5e1; --line: #dcb8c8;
  --accent: #973659; --accent-hover: #752340; --accent-soft: #f5dce6; --reflection: #607fa4;
}
:root[data-palette="amber"], .palette-preview[data-palette="amber"] {
  --page: #f8efdc; --surface: #fffbf2; --surface-hover: #ecdfbf; --line: #d1c1a1;
  --accent: #80581a; --accent-hover: #63410e; --accent-soft: #f0e2bf; --reflection: #458d8a;
}
:root[data-palette="teal"], .palette-preview[data-palette="teal"] {
  --page: #e0f3f2; --surface: #f5fcfb; --surface-hover: #c9e8e6; --line: #a7ccc9;
  --accent: #126167; --accent-hover: #08474c; --accent-soft: #cce8e6; --reflection: #8a73a3;
}
:root[data-palette="violet"], .palette-preview[data-palette="violet"] {
  --page: #eeebfa; --surface: #fcfaff; --surface-hover: #e0d9f4; --line: #c5badd;
  --accent: #69459b; --accent-hover: #4e2f79; --accent-soft: #e6ddf5; --reflection: #388e87;
}
:root[data-palette="coral"], .palette-preview[data-palette="coral"] {
  --page: #fbece6; --surface: #fff9f6; --surface-hover: #f3dbd0; --line: #dbbeaf;
  --accent: #9a452c; --accent-hover: #74321e; --accent-soft: #f5ded2; --reflection: #438783;
}
:root[data-palette="lime"], .palette-preview[data-palette="lime"] {
  --page: #edf3dc; --surface: #fbfdf4; --surface-hover: #e0e9c6; --line: #c1cba3;
  --accent: #52651b; --accent-hover: #3e4b13; --accent-soft: #e2eac9; --reflection: #678ba6;
}
:root[data-palette="graphite"], .palette-preview[data-palette="graphite"] {
  --page: #e7e9ed; --surface: #f8f9fb; --surface-hover: #d8dce3; --line: #bcc2cc;
  --accent: #4d5770; --accent-hover: #35415a; --accent-soft: #dce1eb; --reflection: #549b90;
}
:root[data-palette="ice"], .palette-preview[data-palette="ice"] {
  --page: #e3f3fa; --surface: #f6fcff; --surface-hover: #cfe7f2; --line: #adcad9;
  --accent: #24607d; --accent-hover: #15465d; --accent-soft: #d3eaf4; --reflection: #ad648b;
}
:root[data-palette="plum"], .palette-preview[data-palette="plum"] {
  --page: #f4e8f7; --surface: #fdf8ff; --surface-hover: #ead4ef; --line: #d2b5d9;
  --accent: #86438f; --accent-hover: #632c6b; --accent-soft: #ecd9f1; --reflection: #458f85;
}
:root[data-palette="silver"], .palette-preview[data-palette="silver"] {
  --page: #f4f5f5; --surface: #ffffff; --surface-hover: #e3e9e8; --line: #c5cecc;
  --accent: #405e58; --accent-hover: #29443e; --accent-soft: #e0ebe7; --reflection: #6989ae;
}
:root[data-theme="dark"][data-palette="jade"], :root[data-theme="dark"] .palette-preview[data-palette="jade"] {
  --page: #111e1a; --surface: #1e3029; --surface-hover: #30483d; --line: #425c4f;
  --accent: #a0ddbb; --accent-hover: #c0efcf; --accent-soft: #29483a; --reflection: #82bcdd;
}
:root[data-theme="dark"][data-palette="azure"], :root[data-theme="dark"] .palette-preview[data-palette="azure"] {
  --page: #131c2c; --surface: #21324b; --surface-hover: #304664; --line: #465c79;
  --accent: #aacdfc; --accent-hover: #d0e3ff; --accent-soft: #2b405d; --reflection: #81d1bd;
}
:root[data-theme="dark"][data-palette="rose"], :root[data-theme="dark"] .palette-preview[data-palette="rose"] {
  --page: #25151c; --surface: #3b2430; --surface-hover: #51333f; --line: #755062;
  --accent: #f5b5ce; --accent-hover: #ffd4e4; --accent-soft: #512c3b; --reflection: #a8c0e9;
}
:root[data-theme="dark"][data-palette="amber"], :root[data-theme="dark"] .palette-preview[data-palette="amber"] {
  --page: #211c12; --surface: #363020; --surface-hover: #4c432a; --line: #6b5b3b;
  --accent: #ebce8b; --accent-hover: #fae5b7; --accent-soft: #494024; --reflection: #93cdc6;
}
:root[data-theme="dark"][data-palette="teal"], :root[data-theme="dark"] .palette-preview[data-palette="teal"] {
  --page: #101f20; --surface: #1b3334; --surface-hover: #2a4849; --line: #426264;
  --accent: #98dbd6; --accent-hover: #bdf1eb; --accent-soft: #244645; --reflection: #c4addd;
}
:root[data-theme="dark"][data-palette="violet"], :root[data-theme="dark"] .palette-preview[data-palette="violet"] {
  --page: #1c182a; --surface: #2e2842; --surface-hover: #413654; --line: #5b4d77;
  --accent: #cdb9f2; --accent-hover: #e3d6ff; --accent-soft: #3d3054; --reflection: #91d4c5;
}
:root[data-theme="dark"][data-palette="coral"], :root[data-theme="dark"] .palette-preview[data-palette="coral"] {
  --page: #261913; --surface: #3d2b23; --surface-hover: #543a30; --line: #745044;
  --accent: #efbfa5; --accent-hover: #ffdbc6; --accent-soft: #513429; --reflection: #9bcec2;
}
:root[data-theme="dark"][data-palette="lime"], :root[data-theme="dark"] .palette-preview[data-palette="lime"] {
  --page: #1b2010; --surface: #2d351e; --surface-hover: #40492b; --line: #5c6743;
  --accent: #cadb93; --accent-hover: #e2efb3; --accent-soft: #3b4725; --reflection: #abc8e7;
}
:root[data-theme="dark"][data-palette="graphite"], :root[data-theme="dark"] .palette-preview[data-palette="graphite"] {
  --page: #191b21; --surface: #2b2e38; --surface-hover: #3a404d; --line: #545c6b;
  --accent: #c1cade; --accent-hover: #e0e6f4; --accent-soft: #363e50; --reflection: #9fd5c9;
}
:root[data-theme="dark"][data-palette="ice"], :root[data-theme="dark"] .palette-preview[data-palette="ice"] {
  --page: #142129; --surface: #233640; --surface-hover: #304953; --line: #456776;
  --accent: #a6d6ed; --accent-hover: #ccecfb; --accent-soft: #2a4654; --reflection: #e3b3d0;
}
:root[data-theme="dark"][data-palette="plum"], :root[data-theme="dark"] .palette-preview[data-palette="plum"] {
  --page: #241626; --surface: #3a253e; --surface-hover: #503354; --line: #725079;
  --accent: #e4b6ec; --accent-hover: #f5d3fb; --accent-soft: #4c2e53; --reflection: #a2d4c0;
}
:root[data-theme="dark"][data-palette="silver"], :root[data-theme="dark"] .palette-preview[data-palette="silver"] {
  --page: #181c1c; --surface: #2a3130; --surface-hover: #3b4543; --line: #53615d;
  --accent: #bcd4cd; --accent-hover: #ddece7; --accent-soft: #34463f; --reflection: #b4c6e3;
}
html { scrollbar-color: var(--line) var(--page); }
::selection { background: var(--accent); color: var(--on-accent); }
input, textarea { caret-color: var(--accent); }
.site-header, .site-sidebar, .theme-popover, .search-dialog {
  background: var(--surface);
}
.site-header::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--line), var(--accent), var(--reflection), var(--line));
  opacity: .65; pointer-events: none;
}
@supports (backdrop-filter: blur(12px)) {
  .site-header, .site-sidebar {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(16px);
  }
  .theme-popover, .search-dialog {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(20px);
  }
}
.primary-nav { flex-wrap: nowrap; }
.header-inner .icon-button, .theme-menu, .site-search { flex: 0 0 44px; }
.header-inner .icon-button, .chapter-link, .example-tools .icon-button { width: 44px; height: 44px; }
.icon-button svg { stroke-width: 1.5; }
.icon-button:active { background: var(--accent-soft); }
.site-search { display: flex; align-items: center; }
.site-sidebar {
  inset: calc(var(--header-height) + 24px) auto auto 16px;
  width: calc(var(--sidebar-width) - 28px);
  max-height: calc(100dvh - var(--header-height) - 48px);
  padding: 12px; border: 1px solid var(--line); border-radius: var(--edge-radius);
}
.sidebar-heading { margin-bottom: 12px; padding-left: 8px; font-size: 12px; }
.site-links { gap: 4px; }
.site-links strong { margin-bottom: 12px; }
.site-links a { min-height: 40px; gap: 10px; border: 1px solid transparent; border-radius: 6px; }
.site-links a[aria-current] { border-color: var(--line); }
.site-links a[aria-current]::before { display: none; }
.sidebar-bottom { margin-top: 12px; padding: 8px 8px 0; border-top: 1px solid var(--line); }
.page-heading h1, .docs-article h2 { text-wrap: balance; }
.page-heading { padding-block: 36px 28px; }
.page-heading > .eyebrow, .docs-article section > .eyebrow, .help-layout section > .eyebrow { display: none; }
.docs-article section { padding-block: 32px; }
.docs-article p, .docs-article li, .docs-article dd { font-size: 16px; line-height: 1.85; }
.docs-path-grid { gap: 12px; }
.docs-path-grid a, .help-destinations a {
  padding: 18px; border: 1px solid var(--line); border-radius: var(--edge-radius);
  background: var(--surface); transition: background var(--motion), border-color var(--motion);
}
.docs-path-grid a:hover, .help-destinations a:hover {
  background: var(--surface-hover); border-color: var(--accent); text-decoration: none;
}
.chapter-link { margin-left: 8px; vertical-align: middle; color: var(--muted); }
.docs-article pre { margin-top: 0; border-radius: 0 0 6px 6px; }
.example-tools { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 44px; background: var(--code-bg); padding-inline: 12px; border-radius: 6px 6px 0 0; }
.copy-status { font-size: 13px; color: var(--accent); }
.theme-menu { position: relative; }
.theme-popover {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 30;
  width: 320px; max-width: calc(100vw - 32px); max-height: calc(100dvh - var(--header-height) - 28px);
  overflow-y: auto; overscroll-behavior: contain; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--edge-radius);
}
.theme-menu .theme-popover fieldset {
  position: static; display: grid; gap: 8px; width: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; animation: none;
}
.theme-menu .theme-popover legend { float: none; width: auto; padding: 0 0 12px; color: var(--ink); font-weight: 600; }
.theme-menu .theme-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-menu .theme-modes label { min-height: 44px; padding: 6px; gap: 6px; font-size: 14px; }
.theme-menu .theme-popover .theme-palettes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.theme-menu .palette-choice { position: relative; display: grid; gap: 6px; min-width: 0; margin: 0; padding: 6px; text-align: center; font-size: 12px; border: 1px solid transparent; border-radius: 6px; }
.palette-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.palette-choice:has(input:checked) { outline: 1px solid var(--accent); background: var(--accent-soft); }
.palette-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.palette-preview { display: block; position: relative; width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 3px; background: var(--page); overflow: hidden; }
.palette-preview::before { content: ""; position: absolute; inset: 5px auto 5px 5px; width: 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); }
.palette-preview::after { content: ""; position: absolute; inset: 8px 6px auto 28px; height: 4px; background: var(--accent); box-shadow: 0 9px 0 var(--reflection); }
.theme-menu .theme-motion { margin-top: 16px; border-top: 1px solid var(--line); padding: 12px 4px 0; min-height: 44px; font-size: 14px; }
.search-open { overflow: hidden; }
.search-dialog {
  position: fixed; inset: 0; width: min(680px, calc(100% - 32px)); max-width: none;
  max-height: min(780px, calc(100dvh - 64px)); margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--edge-radius); color: var(--ink);
}
.search-dialog[open] { display: flex; flex-direction: column; animation: search-arrive 180ms ease-out; }
.search-dialog::backdrop { background: #11182080; }
.search-heading { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.search-heading h2 { font-size: 20px; line-height: 1.4; margin: 0; }
.site-search-form { display: grid; gap: 8px; flex-shrink: 0; margin: 0; padding: 16px 20px 0; font-size: 14px; }
.site-search-input { display: grid; grid-template-columns: minmax(0, 1fr) 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--page); }
.site-search-input:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-search-input input { min-width: 0; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: inherit; background: transparent; color: var(--ink); font-size: 16px; outline: 0; }
.site-search-input input::placeholder { color: var(--muted); opacity: 1; }
.site-search-input input::-webkit-search-cancel-button { display: none; }
.search-filter { display: flex; align-items: center; gap: 12px; padding-top: 4px; color: var(--muted); }
.search-filter select { max-width: 100%; min-width: 0; min-height: 44px; padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }
.search-status { flex-shrink: 0; margin: 12px 20px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.search-results { overflow-y: auto; overscroll-behavior: contain; min-height: 0; list-style: none; margin: 0; padding: 0 12px 12px; }
.search-results li + li { border-top: 1px solid var(--line); }
.search-result { display: grid; gap: 6px; padding: 14px 10px; border-radius: 6px; scroll-margin-block: 8px; }
.search-result:hover, .search-result:focus-visible { background: var(--accent-soft); text-decoration: none; }
.search-result:focus-visible { outline-offset: -3px; }
.search-result-page { color: var(--accent); font-size: 12px; }
.search-result strong { font-size: 16px; overflow-wrap: anywhere; }
.search-result p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.search-recovery { padding: 0 20px 24px; }
.search-recovery p { color: var(--muted); line-height: 1.75; }
.search-recovery .text-link { margin-left: 20px; }
@keyframes search-arrive { from { opacity: .7; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1120px) { .primary-nav { gap: 12px; } .header-inner { gap: 6px; } }
@media (max-width: 900px) {
  .site-sidebar, .navigation-ready .site-sidebar {
    inset: 0 auto 0 0; width: min(300px, calc(100% - 48px)); max-height: 100dvh;
    height: 100dvh; padding: 16px; border-radius: 0;
  }
  .site-sidebar:not(.navigation-ready .site-sidebar) { position: relative; height: auto; }
  .site-links a, .site-sidebar .icon-button { min-height: 44px; }
  .sidebar-bottom { margin-top: 20px; }
}
@media (max-width: 700px) {
  .header-inner { gap: 4px; }
  .header-inner .mobile-nav-toggle { flex-basis: 44px; }
  .page-heading { padding-block: 28px 24px; }
  .docs-path-grid a, .help-destinations a { padding: 16px; }
  .theme-popover { position: fixed; right: 12px; top: calc(var(--header-height) + 8px); }
  .search-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .search-heading { padding: 8px 12px; }
  .site-search-form { padding-inline: 16px; }
  .search-status { margin-inline: 16px; }
  .account-page .header-inner .brand { font-size: 15px; }
  .account-page .header-inner > .text-link { font-size: 13px; }
}
@media (max-width: 380px) {
  .brand-compact { display: none; }
  .account-page .header-inner .brand > span { display: none; }
}
@media (max-width: 280px) {
  .header-inner { flex-wrap: wrap; padding-block: 6px; }
  .site-header { position: relative; }
  .search-dialog { max-height: calc(100dvh - 12px); }
}
:root[data-motion="off"] { scroll-behavior: auto; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .search-dialog[open] { animation: none; } }
@media (prefers-reduced-transparency: reduce) {
  .site-header, .site-sidebar, .theme-popover, .search-dialog { background: var(--surface); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root[data-palette] { --line: currentColor; --muted: var(--ink); }
}
@media (forced-colors: active) {
  .palette-choice:has(input:checked) { outline: 2px solid Highlight; }
  .site-header, .site-sidebar, .theme-popover, .search-dialog, .site-search-input { border-color: CanvasText; }
}