:root {
  --ink: #071412;
  --muted: #5f6e69;
  --line: #dfe7e3;
  --paper: #f4f7f3;
  --white: #fff;
  --mint: #b8ff65;
  --green: #1d6f50;
  --dark: #091b17;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
code, pre, .label, .eyebrow, aside p { font-family: "DM Mono", monospace; }

.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 10; padding: .75rem 1rem; background: var(--mint); }
.skip-link:focus { top: 1rem; }
header { height: 74px; padding: 0 clamp(1.25rem, 5vw, 5rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--dark); color: var(--white); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 600; letter-spacing: -.02em; }
.brand > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #536c63; border-radius: 50%; font-family: "DM Mono", monospace; font-size: .7rem; }
.brand b { color: var(--mint); }
header nav { display: flex; gap: 1.75rem; color: #b9c7c2; font-size: .82rem; }
header nav a:hover { color: var(--white); }
.status { color: #cdd7d4; font: .72rem "DM Mono", monospace; }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px #b8ff6522; }

.hero { padding: clamp(5rem, 10vw, 8.5rem) clamp(1.25rem, 8vw, 8rem) 5rem; background: var(--dark); color: var(--white); border-top: 1px solid #253a34; }
.eyebrow, .label { color: var(--green); letter-spacing: .12em; font-size: .7rem; }
.hero .eyebrow { color: var(--mint); }
.hero h1 { margin: 1.1rem 0 1.5rem; font-size: clamp(3rem, 7vw, 6.5rem); letter-spacing: -.065em; line-height: .93; font-weight: 650; }
.hero h1 em { color: var(--mint); font-style: normal; }
.hero > p:not(.eyebrow) { max-width: 690px; color: #aebeb8; font-size: 1.05rem; line-height: 1.8; }
.meta { margin-top: 2.5rem; display: flex; align-items: center; width: fit-content; border: 1px solid #324942; background: #10241e; }
.meta span { align-self: stretch; display: grid; place-items: center; padding: 0 1rem; color: var(--mint); background: #1c392f; font: .7rem "DM Mono", monospace; }
.meta code { padding: .9rem 1.2rem; color: #e6eeeb; font-size: .8rem; }
.copy { border: 0; border-left: 1px solid #324942; padding: .9rem 1rem; color: #d8e2de; background: transparent; cursor: pointer; font: .7rem "DM Mono", monospace; }
.copy:hover { color: var(--mint); }

.layout { display: grid; grid-template-columns: 210px minmax(0, 800px); gap: clamp(2rem, 7vw, 7rem); max-width: 1240px; margin: 0 auto; padding: 5rem 2rem 8rem; }
aside { position: sticky; top: 110px; height: fit-content; display: grid; gap: .9rem; border-left: 1px solid var(--line); padding-left: 1.5rem; }
aside p { margin: 0 0 .35rem; font-size: .65rem; color: #8b9994; letter-spacing: .1em; }
aside a { color: var(--muted); font-size: .84rem; }
aside a:hover { color: var(--green); }
.content { min-width: 0; }
article { padding: 0 0 5rem; margin-bottom: 5rem; border-bottom: 1px solid var(--line); }
article:last-child { margin-bottom: 0; }
article h2 { margin: .8rem 0 1rem; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.045em; }
article > p:not(.label,.footnote) { color: var(--muted); line-height: 1.75; }
.code-block { position: relative; margin-top: 1.5rem; padding: 1.25rem 5rem 1.25rem 1.25rem; overflow: auto; color: #d7e4df; background: var(--dark); border-radius: 5px; }
.code-block .copy { position: absolute; top: 0; right: 0; border-left-color: #31433e; }
.code-block code, .code-block pre { font-size: .78rem; line-height: 1.75; white-space: pre; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.field-grid > div { padding: 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f8faf7; }
.field-grid strong { display: block; font: .82rem "DM Mono", monospace; }
.field-grid span { color: var(--green); font: .67rem "DM Mono", monospace; }
.field-grid p { min-height: 2.6em; margin: .7rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.footnote { color: #74827d; font-size: .75rem; }
.enum-reference { margin-top: 1.25rem; border: 1px solid var(--line); background: #f8faf7; }
.enum-reference summary { padding: 1rem 1.15rem; cursor: pointer; color: var(--green); font-size: .8rem; font-weight: 700; }
.enum-reference > p { margin: 1rem 1.15rem .65rem; color: var(--muted); font-size: .78rem; }
.enum-values { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.15rem 1.15rem; }
.enum-values code { padding: .35rem .5rem; color: #35534a; background: #e8efeb; border-radius: 2px; font-size: .65rem; overflow-wrap: anywhere; }
.tabs { display: flex; gap: .25rem; margin-top: 2rem; }
.tabs button { border: 1px solid var(--line); padding: .55rem .9rem; background: transparent; cursor: pointer; font: .7rem "DM Mono", monospace; }
.tabs button.active { color: var(--white); background: var(--green); border-color: var(--green); }
.sample { margin-top: 0; min-height: 170px; }
.responses { border-top: 1px solid var(--line); }
.responses div { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; padding: 1rem .25rem; border-bottom: 1px solid var(--line); }
.responses b { color: #a14d34; font: .78rem "DM Mono", monospace; }
.responses b.ok { color: var(--green); }
.responses span { color: var(--muted); font-size: .88rem; }
.schema-table { margin: 1.75rem 0 2.5rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.schema-table > div { display: grid; grid-template-columns: minmax(220px, 1.2fr) 90px 1fr; }
.schema-table > div > * { min-width: 0; padding: .75rem .85rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.schema-table code { color: var(--ink); background: #f8faf7; font-size: .7rem; }
.schema-table span { color: var(--muted); background: #f8faf7; font-size: .76rem; }
.schema-table .schema-head span { color: var(--ink); background: #e8efeb; font: 600 .65rem "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.content h3 { margin: 2rem 0 1rem; font-size: 1.15rem; }
.tester { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #cbd7d2; background: var(--white); }
.tester form { display: grid; gap: 1rem; margin: 2rem 0; }
.tester label { display: grid; gap: .5rem; font-size: .76rem; font-weight: 700; }
.tester label code { color: var(--green); font-size: .65rem; font-weight: 400; }
.tester input, .tester select, .tester textarea { width: 100%; border: 1px solid #cad5d1; padding: .85rem 1rem; color: var(--ink); background: #fbfcfa; border-radius: 3px; outline: none; }
.tester input:focus, .tester select:focus, .tester textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px #1d6f5012; }
.tester textarea { min-height: 90px; resize: vertical; font-family: "DM Mono", monospace; font-size: .72rem; line-height: 1.5; }
.tester input[type="file"] { padding: .65rem; }
.tester input[type="file"]::file-selector-button { margin-right: .75rem; border: 0; padding: .45rem .7rem; color: var(--dark); background: #e2ebe6; cursor: pointer; }
.tester fieldset { margin: .35rem 0; padding: 1rem; border: 1px solid var(--line); }
.tester legend { padding: 0 .4rem; font-size: .77rem; font-weight: 700; }
.tester legend span { margin-left: .4rem; color: var(--green); font: .65rem "DM Mono", monospace; }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-help { margin: .9rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.form-error { min-height: 1.2em; margin: 0; color: #a14d34; font-size: .76rem; }
#send-request { height: 45px; border: 0; padding: 0 1.4rem; background: var(--mint); color: var(--dark); font-weight: 700; cursor: pointer; }
#send-request:disabled { opacity: .5; cursor: wait; }
.response-head { display: flex; justify-content: space-between; padding: .8rem 1rem; color: #95a8a1; background: #10241e; font: .65rem "DM Mono", monospace; border-bottom: 1px solid #31433e; }
.response-actions { display: flex; align-items: center; gap: .8rem; }
.response-actions button, .response-actions a { border: 0; padding: 0; color: #d7e4df; background: transparent; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.response-actions button:hover, .response-actions a:hover { color: var(--mint); }
.response-actions button:disabled { color: #64756f; cursor: default; text-decoration: none; }
#response-status.success { color: var(--mint); }
#response-status.error { color: #ffab8e; }
#response-json { min-height: 230px; max-height: 600px; margin: 0; padding: 1.2rem; overflow: auto; color: #d7e4df; background: var(--dark); font-size: .75rem; line-height: 1.65; }
.checkbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.checkbox-grid label { display: flex; grid-template-columns: none; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--line); background: #fbfcfa; font-family: "DM Mono", monospace; font-size: .68rem; font-weight: 500; }
.checkbox-grid input { width: auto; margin: 0; accent-color: var(--green); }
.report-options { display: grid; gap: 1rem; }
.report-options .report-toggle { display: flex; grid-template-columns: none; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid var(--line); background: #f7faf7; cursor: pointer; }
.report-toggle input { width: auto; margin: .18rem 0 0; accent-color: var(--green); }
.report-toggle span { display: grid; gap: .3rem; }
.report-toggle strong { font-size: .78rem; }
.report-toggle small { color: var(--muted); font-size: .7rem; font-weight: 400; line-height: 1.55; }
.weight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.schema-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 .75rem; }
.schema-tools input { width: min(360px, 100%); border: 1px solid #cad5d1; padding: .7rem .85rem; background: #fbfcfa; }
.schema-count { color: var(--green); font: .7rem "DM Mono", monospace; white-space: nowrap; }
.response-schema { max-height: 720px; overflow: auto; border-bottom: 1px solid var(--line); }
.response-schema .schema-table { margin: 0; }
.response-schema .schema-table > div { grid-template-columns: minmax(320px, 1.6fr) 100px 1fr; }
footer { display: flex; justify-content: space-between; padding: 2rem clamp(1.25rem, 5vw, 5rem); color: #afbeb9; background: var(--dark); font-size: .75rem; }

@media (max-width: 760px) {
  header nav { display: none; }
  .status { display: none; }
  .layout { display: block; padding-inline: 1.25rem; }
  aside { display: none; }
  .field-grid { grid-template-columns: 1fr; }
  .input-grid { grid-template-columns: 1fr; }
  .checkbox-grid, .weight-grid { grid-template-columns: 1fr 1fr; }
  .schema-tools { align-items: stretch; flex-direction: column; }
  .schema-table { overflow-x: auto; }
  .schema-table > div { min-width: 600px; }
  .tabs { flex-wrap: wrap; }
  .meta { max-width: 100%; }
  .meta code { overflow: hidden; text-overflow: ellipsis; }
  .meta .copy { display: none; }
}