:root {
  --navy: #173247;
  --navy-deep: #102838;
  --mustard: #e2a63b;
  --mustard-light: #f1c66d;
  --oxblood: #95383b;
  --cream: #f5eacd;
  --paper: #fbf6e9;
  --white: #fffdf7;
  --ink: #173247;
  --body: #43535b;
  --muted: #718087;
  --line: rgba(23, 50, 71, .15);
  --display: "Newsreader", Georgia, serif;
  --sans: "Instrument Sans", sans-serif;
  --header: 66px;
  --sidebar: 300px;
  --content: 780px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 34px); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { color: inherit; font: inherit; }
::selection { color: var(--white); background: var(--oxblood); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 9999; top: 8px; left: 8px; padding: 8px 14px; color: var(--navy); background: var(--mustard-light); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.docs-header { position: fixed; z-index: 1000; inset: 0 0 auto; height: var(--header); color: var(--cream); background: rgba(16, 40, 56, .97); border-bottom: 1px solid rgba(245, 234, 205, .12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.header-inner { width: min(100% - 40px, 1380px); height: 100%; margin: auto; display: flex; align-items: center; gap: 16px; }
.docs-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 1.17rem; font-weight: 700; letter-spacing: -.02em; }
.docs-brand img { width: 34px; height: 34px; border-radius: 8px; }
.header-divider { width: 1px; height: 24px; background: rgba(245, 234, 205, .2); }
.help-label { color: rgba(245, 234, 205, .6); font-size: .86rem; }
.docs-header nav { display: flex; gap: 26px; margin-left: auto; }
.docs-header nav a { color: rgba(245, 234, 205, .65); font-size: .8rem; font-weight: 600; }
.docs-header nav a:hover { color: var(--cream); }
.sidebar-toggle { display: none; margin-left: auto; padding: 7px 12px; color: var(--cream); background: transparent; border: 1px solid rgba(245, 234, 205, .3); border-radius: 4px; font-size: .75rem; font-weight: 700; }

.docs-layout { padding-top: var(--header); }
.docs-sidebar { position: fixed; z-index: 100; inset: var(--header) auto 0 0; width: max(var(--sidebar), calc((100vw - 1380px) / 2 + var(--sidebar))); padding-left: max(0px, calc((100vw - 1380px) / 2)); color: var(--cream); background: var(--navy); border-right: 1px solid rgba(245, 234, 205, .1); overflow-y: auto; }
.sidebar-inner { width: var(--sidebar); min-height: 100%; padding: 35px 25px 30px; display: flex; flex-direction: column; }
.search-box { height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 9px; color: var(--cream); background: rgba(255, 255, 255, .07); border: 1px solid rgba(245, 234, 205, .14); border-radius: 4px; }
.search-box:focus-within { border-color: var(--mustard-light); box-shadow: 0 0 0 2px rgba(241, 198, 109, .14); }
.search-box svg { width: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search-box input { min-width: 0; width: 100%; color: inherit; background: transparent; border: 0; outline: 0; font-size: .81rem; }
.search-box input::placeholder { color: rgba(245, 234, 205, .45); }
.search-box kbd { padding: 1px 5px; color: rgba(245, 234, 205, .45); background: rgba(0, 0, 0, .12); border: 1px solid rgba(245, 234, 205, .14); border-radius: 3px; font-size: .62rem; font-family: var(--sans); }
.nav-title { margin: 31px 10px 10px; color: var(--mustard-light); font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.topic-nav { display: flex; flex-direction: column; gap: 2px; }
.topic-nav a { padding: 9px 10px; display: grid; grid-template-columns: 23px 1fr; gap: 7px; color: rgba(245, 234, 205, .58); border-radius: 4px; font-size: .78rem; line-height: 1.35; transition: color .2s, background .2s; }
.topic-nav a span { color: rgba(241, 198, 109, .5); font-family: var(--display); font-style: italic; }
.topic-nav a:hover, .topic-nav a.active { color: var(--cream); background: rgba(255, 255, 255, .07); }
.topic-nav a.active span { color: var(--mustard-light); }
.sidebar-support { margin-top: auto; padding: 22px 11px 4px; border-top: 1px solid rgba(245, 234, 205, .12); }
.sidebar-support p { margin: 0 0 2px; color: rgba(245, 234, 205, .42); font-size: .7rem; }
.sidebar-support a { color: var(--mustard-light); font-size: .78rem; font-weight: 700; }

.docs-main { margin-left: max(var(--sidebar), calc((100vw - 1380px) / 2 + var(--sidebar))); min-height: calc(100vh - var(--header)); }
.docs-content { width: min(100% - 64px, var(--content)); margin: 0 auto; padding-top: 82px; }
.docs-intro { padding-bottom: 72px; }
.eyebrow, .topic-kicker { margin: 0 0 12px; color: var(--oxblood); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.docs-intro h1 { margin: 0; font-family: var(--display); font-size: clamp(3.5rem, 7vw, 5.8rem); font-weight: 600; letter-spacing: -.055em; line-height: .92; }
.docs-intro > p:not(.eyebrow):not(.version-note) { max-width: 650px; margin: 24px 0 0; color: var(--body); font-size: 1.13rem; }
.version-note { display: inline-block; margin: 23px 0 0; padding: 7px 11px; color: #765819; background: rgba(226, 166, 59, .15); border-left: 3px solid var(--mustard); font-size: .73rem; }
.mobile-search { display: none; margin-bottom: 40px; }
.search-status { min-height: 0; margin: 0 0 16px; color: var(--oxblood); font-size: .8rem; font-weight: 700; }
.search-status:empty { display: none; }

.topic { padding: 76px 0 50px; border-top: 1px solid var(--line); }
.topic.hidden { display: none; }
.topic-heading { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; margin-bottom: 53px; }
.topic-number { width: 62px; height: 75px; display: grid; place-items: center; color: var(--cream); background: var(--navy); font-family: var(--display); font-size: 1.45rem; font-style: italic; box-shadow: 5px 5px 0 var(--mustard); transform: rotate(-2deg); }
.topic-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(2.25rem, 5vw, 3.65rem); font-weight: 600; letter-spacing: -.04em; line-height: .98; }
.topic-heading > div > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: .95rem; }
.topic-kicker { margin-bottom: 7px; }
.article-section { margin: 0 0 45px 92px; }
.article-section h3 { margin: 0 0 13px; font-family: var(--display); font-size: 1.65rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.article-section p { margin: 0 0 13px; color: var(--body); font-size: .95rem; }
.article-section ul { margin: 0; padding: 0; color: var(--body); list-style: none; }
.article-section li { padding: 7px 0 7px 23px; position: relative; font-size: .95rem; }
.article-section li::before { content: ""; position: absolute; top: 17px; left: 1px; width: 7px; height: 7px; background: var(--mustard); border-radius: 50%; box-shadow: 0 0 0 3px rgba(226, 166, 59, .16); }
.article-section strong { color: var(--ink); font-weight: 700; }

/* Product screenshots */
.docs-shots { margin: 4px 0 56px 92px; display: grid; gap: 14px; align-items: stretch; }
.docs-shots-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.docs-shots-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.docs-shots-feature { grid-template-columns: 1fr; }
.docs-shot { min-width: 0; margin: 0; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); box-shadow: 0 13px 30px rgba(23, 50, 71, .07); }
.docs-shot-media { height: 420px; padding: 12px; display: grid; place-items: center; overflow: hidden; color: var(--cream); background: #e9e8e4; border-bottom: 1px solid var(--line); }
a.docs-shot-media { cursor: zoom-in; }
.docs-shots-three .docs-shot-media { height: 310px; }
.docs-shots-feature .docs-shot-media { height: 570px; }
.docs-shot-media img { width: 100%; height: 100%; object-fit: contain; filter: saturate(.94); box-shadow: 0 10px 25px rgba(16, 40, 56, .15); transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .3s; }
.docs-shot-phone .docs-shot-media img { width: auto; max-width: 70%; border: 3px solid #112635; border-radius: 16px; }
.docs-shot-tablet .docs-shot-media img { width: 100%; }
.docs-shot-mac .docs-shot-media img { width: 100%; border: 1px solid rgba(23, 50, 71, .16); border-radius: 5px; }
a.docs-shot-media:hover img { transform: scale(1.018); filter: saturate(1); }
.docs-shot figcaption { min-height: 77px; padding: 14px 16px 16px; display: flex; flex-direction: column; }
.docs-shot figcaption span { color: var(--oxblood); font-size: .59rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.docs-shot figcaption strong { margin-top: 3px; font-family: var(--display); font-size: 1rem; font-weight: 600; line-height: 1.15; }
.tip, .warning { margin: 8px 0 50px 92px; padding: 22px 24px; display: grid; grid-template-columns: 60px 1fr; gap: 17px; background: var(--cream); border-left: 4px solid var(--mustard); }
.tip strong, .warning strong { color: var(--oxblood); font-family: var(--display); font-size: 1.2rem; }
.tip p, .warning p { margin: 0; color: var(--body); font-size: .85rem; }
.warning { background: rgba(149, 56, 59, .08); border-left-color: var(--oxblood); }
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mode-grid > div { padding: 25px; background: var(--white); border: 1px solid var(--line); }
.mode-grid span { width: 35px; height: 35px; display: grid; place-items: center; color: var(--cream); background: var(--oxblood); border-radius: 50%; font-family: var(--display); }
.mode-grid h4 { margin: 20px 0 6px; font-family: var(--display); font-size: 1.25rem; }
.mode-grid p { margin: 0; font-size: .83rem; }
.article-section .mode-note { margin-top: 14px; padding: 12px 14px; color: var(--body); background: rgba(226, 166, 59, .1); border-left: 3px solid var(--mustard); font-size: .82rem; }
.shortcut-list { border-top: 1px solid var(--line); }
.shortcut-list > div { min-height: 60px; padding: 10px 0; display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); }
.shortcut-list p { margin: 0; }
kbd { padding: 4px 8px; color: var(--navy); background: var(--white); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; font-family: var(--sans); font-size: .72rem; font-weight: 600; }
.support-card { margin: 10px 0 40px 92px; padding: 27px 30px; display: grid; grid-template-columns: 1fr auto; color: var(--cream); background: var(--oxblood); }
.support-card span, .support-card strong { display: block; }
.support-card span { grid-column: 1; color: rgba(245, 234, 205, .58); font-size: .7rem; }
.support-card strong { font-family: var(--display); font-size: 1.35rem; }
.support-card i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.5rem; font-style: normal; transition: transform .2s; }
.support-card:hover i { transform: translateX(5px); }
.no-results { padding: 80px 20px 130px; text-align: center; }
.no-results span { width: 60px; height: 75px; margin: auto; display: grid; place-items: center; color: var(--cream); background: var(--oxblood); font-family: var(--display); font-size: 2.3rem; box-shadow: 5px 5px 0 var(--mustard); }
.no-results h2 { margin: 25px 0 2px; font-family: var(--display); font-size: 2rem; }
.no-results p { margin: 0; color: var(--muted); }
.no-results button { padding: 0; color: var(--oxblood); background: transparent; border: 0; font-weight: 700; text-decoration: underline; cursor: pointer; }
.docs-footer { margin-top: 70px; padding: 36px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--muted); border-top: 1px solid var(--line); }
.docs-footer .docs-brand { color: var(--navy); font-size: 1rem; }
.docs-footer .docs-brand img { width: 30px; height: 30px; }
.docs-footer p { margin: 0; font-size: .68rem; }
.docs-footer p a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 950px) {
  .docs-header nav, .header-divider, .help-label { display: none; }
  .sidebar-toggle { display: block; }
  .docs-sidebar { display: none; width: min(90vw, 330px); padding-left: 0; box-shadow: 20px 0 50px rgba(0, 0, 0, .2); }
  .docs-sidebar.open { display: block; }
  .sidebar-inner { width: 100%; }
  .docs-main { margin-left: 0; }
  .docs-content { width: min(100% - 44px, var(--content)); }
  .mobile-search { display: block; }
  .mobile-search .search-box { color: var(--navy); background: var(--white); border-color: var(--line); }
  .mobile-search input::placeholder { color: var(--muted); }
}

@media (max-width: 600px) {
  .header-inner { width: calc(100% - 28px); }
  .docs-content { width: calc(100% - 36px); padding-top: 58px; }
  .docs-intro { padding-bottom: 45px; }
  .topic { padding-top: 58px; }
  .topic-heading { grid-template-columns: 50px 1fr; gap: 15px; margin-bottom: 42px; }
  .topic-number { width: 46px; height: 57px; font-size: 1.1rem; box-shadow: 3px 3px 0 var(--mustard); }
  .article-section, .tip, .warning, .support-card, .docs-shots { margin-left: 0; }
  .docs-shots-two, .docs-shots-three { grid-template-columns: 1fr; }
  .docs-shot-media, .docs-shots-three .docs-shot-media { height: 430px; }
  .docs-shots-feature .docs-shot-media { height: 500px; }
  .tip, .warning { grid-template-columns: 1fr; gap: 4px; }
  .mode-grid { grid-template-columns: 1fr; }
  .shortcut-list > div { grid-template-columns: 1fr; gap: 5px; padding: 14px 0; }
  .docs-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
:focus-visible { outline: 3px solid var(--mustard-light); outline-offset: 3px; }