.api-reference { --reference-purple: #490dbc; --reference-border: #dfe6e3; color: #152b27; }
.api-reference [hidden] { display: none !important; }
.reference-hero { padding: 70px 0; background: #f6f5f9; border-bottom: 1px solid var(--reference-border); }
.reference-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.reference-eyebrow, .reference-small-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #69736f; }
.reference-hero h1 { margin: 17px 0 22px; font-size: clamp(34px, 4vw, 54px); line-height: 1.08; letter-spacing: -.045em; }
.reference-hero p { margin-bottom: 28px; max-width: 590px; color: #61706c; font-size: 17px; line-height: 1.7; }
.reference-hero .button { gap: 16px; }
.reference-hero-card { border: 1px solid #34333c; background: #15121e; padding: 25px 28px; border-radius: 9px; color: #fff; box-shadow: 0 14px 40px #1e133b12; min-width: 0; }
.reference-hero-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 27px; font: 12px/1.5 ui-monospace, monospace; color: #c7bddb; }
.reference-hero-card-top > span:first-child { color: #0bdf87; font-size: 25px; }
.reference-hero-card > code { display: block; margin-top: 8px; overflow-wrap: anywhere; font-size: 14px; color: #fff; }
.reference-hero-card .reference-small-label { color: #a7a0b4; }
.reference-hero-endpoints { display: grid; gap: 15px; margin-top: 25px; padding-top: 23px; border-top: 1px solid #39333f; font: 12px/1.5 ui-monospace, monospace; }
.reference-hero-endpoints b { display: inline-block; min-width: 48px; color: #63e1b3; }
.reference-hero-endpoints .reference-post { color: #d9b7ff; }
.reference-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 54px; padding-top: 54px; padding-bottom: 60px; align-items: start; }
.reference-sidebar { position: sticky; top: 25px; }
.reference-sidebar nav { display: grid; gap: 4px; }
.reference-sidebar .reference-small-label { margin: 12px 10px; }
.reference-sidebar a { display: flex; align-items: center; gap: 9px; padding: 11px 10px; font-size: 13px; line-height: 1.5; text-decoration: none; border-radius: 4px; color: #43544d; }
.reference-sidebar a:hover, .reference-sidebar a:focus-visible { background: #f3edf9; color: var(--reference-purple); }
.reference-method { display: inline-block; flex-shrink: 0; min-width: 42px; padding: 4px 7px; background: #e3f7ed; color: #126247; border-radius: 4px; text-align: center; font: 700 10px/1.4 ui-monospace, monospace; }
.reference-method--post { background: #eee5fc; color: var(--reference-purple); }
.reference-content { min-width: 0; }
.reference-section { scroll-margin-top: 28px; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--reference-border); }
.reference-section h2 { margin: 12px 0 16px; font-size: clamp(25px, 2.5vw, 32px); line-height: 1.2; letter-spacing: -.035em; }
.reference-section h3 { margin: 27px 0 5px; font-size: 16px; }
.reference-section p { font-size: 14px; line-height: 1.8; }
.reference-muted { color: #64716c; }
.reference-section p.reference-muted { font-size: 12px; }
.reference-note { padding: 17px 20px; background: #f6f7f8; border-left: 3px solid #c9b8e5; border-radius: 0 5px 5px 0; font-size: 13px; line-height: 1.8; }
.reference-filters { display: grid; grid-template-columns: 1fr 1.3fr; gap: 17px; margin: 0 0 40px; background: #faf9fb; padding: 20px; border: 1px solid var(--reference-border); border-radius: 6px; }
.reference-filters label { display: grid; gap: 8px; font-size: 12px; font-weight: 600; min-width: 0; }
.reference-filters :is(input, select) { width: 100%; min-width: 0; height: 42px; border: 1px solid #ced8d3; border-radius: 4px; background: #fff; color: #152b27; padding: 8px 10px; font: inherit; }
.reference-filters :is(input, select):focus-visible, .reference-code :is(button, pre):focus-visible { outline: 2px solid #8970ca; outline-offset: 3px; }
.reference-empty { padding: 25px; background: #f7f3fc; }
.reference-endpoint-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.reference-endpoint-bar > code { font: 600 14px/1.6 ui-monospace, monospace; overflow-wrap: anywhere; }
.reference-audience { margin-left: auto; color: #68746e; font-size: 11px; }
.reference-permission { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #64716c; }
.reference-permission code { background: #f0eafa; border: 1px solid #e5daf5; padding: 4px 9px; border-radius: 4px; color: var(--reference-purple); font-size: 12px; }
.reference-table-wrap { width: 100%; overflow-x: auto; margin: 15px 0 24px; }
.reference-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.reference-table th, .reference-table td { padding: 15px 12px; border-bottom: 1px solid var(--reference-border); vertical-align: top; }
.reference-table thead th { background: #f7f8f7; font-size: 11px; color: #65736b; font-weight: 600; }
.reference-table tbody th { width: 185px; font-weight: 500; }
.reference-table th code { font-size: 12px; overflow-wrap: anywhere; }
.reference-table small { display: block; color: #6f7773; font: 11px/1.8 ui-monospace, monospace; margin-top: 3px; }
.reference-table td { line-height: 1.75; }
.reference-requirement { display: block; font-size: 10px; font-weight: 400; color: #737b76; margin-top: 5px; }
.reference-requirement--required { color: #6d46a2; }
.reference-code { background: #17151e; border: 1px solid #393540; border-radius: 6px; margin: 22px 0; color: #dfd9e9; min-width: 0; overflow: hidden; }
.reference-code-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 15px; border-bottom: 1px solid #393540; color: #d4c9e4; font: 11px/1.6 ui-monospace, monospace; }
.reference-code-header button { background: #332b40; color: #f0e5ff; font: inherit; border: 1px solid #665078; border-radius: 4px; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
.reference-code pre { overflow-x: auto; padding: 20px; margin: 0; white-space: pre; tab-size: 2; font: 12px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.reference-code code { color: inherit; background: none; }
.reference-statuses { margin: 25px 0; }
.reference-statuses > div { display: grid; grid-template-columns: 55px 1fr; padding: 12px 0; gap: 15px; border-bottom: 1px solid var(--reference-border); font-size: 13px; line-height: 1.7; }
.reference-statuses dt { font-weight: 600; color: var(--reference-purple); }
.reference-statuses dd { margin: 0; }
.reference-copy-status { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 40px); background: #152b27; color: #fff; padding: 10px 20px; border-radius: 5px; font-size: 13px; z-index: 20; }
.reference-copy-status:empty { display: none; }
@media (max-width: 1000px) {
    .reference-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
    .reference-hero-grid { gap: 35px; }
    .reference-hero-card { padding: 20px; }
    .reference-audience { width: 100%; margin-left: 0; }
}
@media (max-width: 760px) {
    .reference-hero { padding: 44px 0; }
    .reference-hero-grid, .reference-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .reference-hero-card { max-width: 520px; }
    .reference-sidebar { position: static; padding-bottom: 22px; border-bottom: 1px solid var(--reference-border); }
    .reference-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reference-sidebar .reference-small-label { grid-column: 1 / -1; }
    .reference-sidebar a { font-size: 12px; padding: 7px; }
    .reference-filters { grid-template-columns: 1fr; padding: 16px; }
    .reference-table th, .reference-table td { padding: 13px 6px; }
    .reference-table tbody th { width: 115px; }
    .reference-code pre { padding: 15px; font-size: 11px; }
}