:root {
  color-scheme: dark;
  --bg: #101010;
  --surface: #171717;
  --surface-hover: #1d1d1d;
  --line: #2b2b2b;
  --line-soft: #232323;
  --text: #f0f0ed;
  --muted: #a3a3a0;
  --quiet: #747471;
  --accent: #d4ff70;
  --order: #f7d493;
  --improve: #c6b5ff;
  --customize: #a8d8ff;
  --radius: .55rem;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--text); background: var(--bg); font-family: var(--font-sans); font-size: 15px; line-height: 1.65; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
code, pre, kbd { font-family: var(--font-mono); }
code { color: #e9e9e4; font-size: .9em; }

.skip-link { position: fixed; z-index: 20; top: -4rem; left: 1rem; padding: .5rem .75rem; color: #111; background: var(--accent); border-radius: .3rem; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 1rem; }
.global-header { position: sticky; z-index: 10; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 3.9rem; padding: 0 max(1.5rem, calc((100vw - 1460px) / 2)); background: rgb(16 16 16 / 94%); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.wordmark { display: inline-flex; align-items: center; gap: .5rem; width: max-content; color: var(--text); font-size: .91rem; font-weight: 720; letter-spacing: -.02em; text-decoration: none; }
.wordmark-mark { display: grid; width: 1.4rem; height: 1.4rem; place-items: center; color: #101010; background: var(--accent); border-radius: .28rem; font-family: Georgia, serif; font-size: .9rem; font-weight: 800; }
.wordmark-divider, .wordmark-section { color: var(--quiet); font-weight: 500; }
.header-nav { display: flex; gap: 1.3rem; align-items: center; }
.header-nav a { color: var(--muted); font-size: .82rem; text-decoration: none; }
.header-nav a:hover, .header-nav a[aria-current="page"] { color: var(--text); }
.header-note { justify-self: end; color: var(--quiet); font-family: var(--font-mono); font-size: .7rem; }

.docs-shell { display: grid; grid-template-columns: 15rem minmax(0, 48rem) 12.5rem; gap: clamp(2rem, 5vw, 5.75rem); width: 100%; max-width: 1460px; min-height: calc(100vh - 3.9rem); margin: 0 auto; padding: 2.75rem 1.5rem; }
.sidebar { min-width: 0; }
.sidebar-nav, .on-this-page { position: sticky; top: 6.25rem; }
.sidebar-nav { display: grid; gap: .13rem; }
.nav-label { margin: 1.45rem 0 .45rem; color: var(--quiet); font-size: .68rem; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
.nav-label:first-child { margin-top: 0; }
.sidebar-nav a { display: block; padding: .34rem .55rem; color: var(--muted); border-radius: .3rem; font-size: .83rem; line-height: 1.4; text-decoration: none; }
.sidebar-nav a:hover { color: var(--text); background: var(--surface-hover); }
.sidebar-nav a.active { color: var(--text); background: var(--surface); font-weight: 650; }
.mobile-nav { display: none; }

.doc-content { min-width: 0; padding-bottom: 5rem; }
.breadcrumbs { display: flex; gap: .45rem; align-items: center; margin-bottom: 1.4rem; color: var(--quiet); font-size: .77rem; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); }
.eyebrow { margin: 0 0 .55rem; color: var(--accent); font-size: .7rem; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; }
.doc-header { padding-bottom: 2.35rem; border-bottom: 1px solid var(--line); }
.doc-header h1 { max-width: 43rem; margin: 0 0 1rem; font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: .98; letter-spacing: -.06em; }
.doc-header > p:last-child { max-width: 43rem; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }

section { padding-top: 3rem; scroll-margin-top: 5rem; }
section h2 { margin: 0 0 .8rem; color: var(--text); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.13; letter-spacing: -.04em; }
section h2 a { color: var(--quiet); font-family: var(--font-mono); font-size: .8rem; font-weight: 500; text-decoration: none; opacity: 0; }
section h2:hover a { opacity: 1; }
section h3 { margin: 0 0 .45rem; color: var(--text); font-size: 1.08rem; letter-spacing: -.02em; }
section h4 { margin: 1.5rem 0 .35rem; color: var(--text); font-size: .9rem; }
section > p, .section-copy { max-width: 43rem; margin: 0 0 1.25rem; color: var(--muted); }
.doc-content a:not(.doc-footer a):not(.sidebar-nav a):not(.on-this-page a) { color: var(--text); text-decoration-color: #545454; text-underline-offset: .18rem; }
.doc-content a:not(.doc-footer a):not(.sidebar-nav a):not(.on-this-page a):hover { color: var(--accent); text-decoration-color: var(--accent); }

.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.check-grid > div { min-height: 10.75rem; padding: 1rem; background: var(--surface); }
.check-grid span { display: inline-block; margin-bottom: 2.4rem; color: var(--accent); font-family: var(--font-mono); font-size: .75rem; }
.check-grid p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.check-grid strong { color: var(--text); }
.code-block, .example { overflow: hidden; margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: #151515; }
.code-title, .example > p { display: flex; justify-content: space-between; margin: 0; padding: .53rem .8rem; color: var(--muted); border-bottom: 1px solid var(--line); background: #191919; font-family: var(--font-mono); font-size: .68rem; }
.code-title span:last-child { color: var(--quiet); }
pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; color: #e5e5df; font-size: .8rem; line-height: 1.72; }

.quick-start { padding-top: 3.75rem; }
.quick-start > p { max-width: 42rem; }
.quick-flow { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .9rem; padding: 1.65rem 0; border-top: 1px solid var(--line); }
.quick-flow:last-of-type { border-bottom: 1px solid var(--line); }
.quick-flow > span { padding-top: .27rem; color: var(--accent); font-family: var(--font-mono); font-size: .72rem; }
.quick-flow h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
.quick-flow p { max-width: 42rem; margin: 0; color: var(--muted); font-size: .9rem; }
.quick-flow a { font-size: .82rem; }
.quick-flow.order > span, .quick-flow.order a { color: var(--order); }
.quick-flow.improve > span, .quick-flow.improve a { color: var(--improve); }
.quick-flow.customize > span, .quick-flow.customize a { color: var(--customize); }
.quick-help, .note, .guardrail { max-width: 43rem; margin-top: 1rem; padding: .85rem 1rem; color: var(--muted); border-left: 2px solid var(--accent); background: var(--surface); font-size: .85rem; }
.quick-help strong, .note strong, .guardrail strong { color: var(--text); }
.guardrail { border-left-color: var(--order); }

.topic-list { display: grid; border-top: 1px solid var(--line); }
.topic-list a { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: .75rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.topic-list a:hover strong { color: var(--accent); }
.topic-list span { color: var(--accent); font-family: var(--font-mono); font-size: .68rem; }
.topic-list strong { font-size: .95rem; }
.topic-list small { color: var(--muted); font-size: .78rem; }
.topic-list i { color: var(--quiet); font-style: normal; }

.steps { display: grid; gap: 0; margin: 1.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); counter-reset: steps; }
.steps li { position: relative; padding: .95rem 0 .95rem 2.35rem; color: var(--muted); border-bottom: 1px solid var(--line); counter-increment: steps; }
.steps li::before { position: absolute; top: 1rem; left: 0; content: counter(steps, decimal-leading-zero); color: var(--accent); font-family: var(--font-mono); font-size: .67rem; }
.steps strong { color: var(--text); }
.plain-list { margin: .8rem 0 0; padding-left: 1.15rem; color: var(--muted); }
.plain-list li + li { margin-top: .35rem; }
.plain-list strong { color: var(--text); }

.table-wrap { overflow-x: auto; margin: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: .81rem; }
th, td { padding: .72rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
th { color: var(--text); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
td { color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }

.skill-block { display: grid; grid-template-columns: minmax(10.5rem, .72fr) minmax(0, 1.35fr); gap: 1.6rem; padding: 1.5rem 0; border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.skill-block:last-child { border-bottom: 1px solid var(--line); }
.skill-label { display: inline-block; margin-bottom: .4rem; color: var(--accent); font-family: var(--font-mono); font-size: .62rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.skill-block.order .skill-label { color: var(--order); }
.skill-block.improve .skill-label { color: var(--improve); }
.skill-block.customize .skill-label { color: var(--customize); }
.skill-block h2 { margin: 0 0 .45rem; font-size: 1.2rem; }
.skill-block > div > p { margin: 0; color: var(--muted); font-size: .84rem; }
.field-list { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: .5rem .9rem; margin: 0 0 1rem; font-size: .81rem; line-height: 1.53; }
.field-list dt { color: var(--quiet); font-family: var(--font-mono); font-size: .68rem; }
.field-list dd { margin: 0; color: var(--muted); }
.field-list dd strong { color: var(--text); }
.inline-links { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: 1.2rem; font-size: .82rem; }
.inline-links a { color: var(--muted); }

.doc-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.doc-footer a { display: grid; gap: .13rem; padding: .75rem .85rem; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.doc-footer a:last-child { text-align: right; }
.doc-footer a:hover { border-color: #4a4a4a; background: var(--surface); }
.doc-footer span { color: var(--quiet); font-size: .7rem; }
.doc-footer strong { font-size: .84rem; }

.on-this-page { align-self: start; padding-left: 1rem; border-left: 1px solid var(--line); }
.on-this-page > p { margin: 0 0 .55rem; color: var(--text); font-size: .73rem; font-weight: 700; }
.on-this-page nav { display: grid; gap: .12rem; }
.on-this-page a { color: var(--quiet); font-size: .74rem; line-height: 1.45; text-decoration: none; }
.on-this-page a:hover, .on-this-page a.active { color: var(--accent); }

@media (max-width: 1120px) {
  .docs-shell { grid-template-columns: 14.5rem minmax(0, 48rem); gap: clamp(2rem, 5vw, 4rem); }
  .on-this-page { display: none; }
}

@media (max-width: 760px) {
  .global-header { grid-template-columns: 1fr auto; height: 3.5rem; padding: 0 1rem; }
  .header-nav { display: none; }
  .header-note { font-size: .63rem; }
  .docs-shell { display: block; padding: 1.25rem 1rem 3.5rem; }
  .sidebar-nav { display: none; }
  .mobile-nav { display: block; margin-bottom: 1.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .mobile-nav summary { display: flex; justify-content: space-between; padding: .72rem .8rem; color: var(--text); cursor: pointer; font-size: .82rem; list-style: none; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav-links { display: grid; padding: 0 .4rem .55rem; }
  .mobile-nav-links a { padding: .32rem .4rem; color: var(--muted); font-size: .8rem; text-decoration: none; }
  .doc-header { padding-bottom: 1.8rem; }
  .doc-header h1 { font-size: clamp(2.6rem, 14vw, 3.7rem); }
  .doc-header > p:last-child { font-size: 1rem; }
  section { padding-top: 2.35rem; }
  .check-grid { grid-template-columns: 1fr; }
  .check-grid > div { min-height: auto; }
  .check-grid span { margin-bottom: 1rem; }
  .topic-list a { grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
  .topic-list small { grid-column: 2 / -1; }
  .skill-block { grid-template-columns: 1fr; gap: 1rem; }
  .field-list { grid-template-columns: 1fr; gap: .18rem; }
  .field-list dd { margin-bottom: .5rem; }
  .doc-footer { grid-template-columns: 1fr; }
  .doc-footer a:last-child { text-align: left; }
}