/* The developers page: code in the same glass, ink for keywords, the accent for strings, grey for comments. */
.code { margin: 0; padding: 16px 18px; border-radius: 14px; background: rgba(246, 247, 250, 0.9); border: 1px solid var(--line); font: 12.5px/1.65 var(--mono); color: var(--ink-2); overflow-x: auto; white-space: pre; }
.code .k { color: var(--ink); font-weight: 500; }
.code .s { color: var(--accent); }
.code .u { color: #a8640a; }
.code .n { color: #1f8a3a; }
.code .c { color: var(--faint); }
.qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qs-step { padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qs-step b { font: 400 14px var(--mono); color: var(--accent); }
.qs-step h3 { margin-top: 8px; }
.qs-step p { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.qs-step .code { flex: 1; }
@media (max-width: 1000px) { .qs { grid-template-columns: 1fr; } }
.code-card { padding: 14px; min-width: 0; }
.code-h { display: flex; justify-content: space-between; padding: 4px 6px 12px; }
.code-h .mini { font: 400 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ref { padding: 8px 18px; overflow-x: auto; }
.ref-t td { white-space: normal; max-width: none; }
.ref-t td:nth-child(2) { font-weight: 500; color: var(--ink); white-space: nowrap; }
.ref-t td:nth-child(3) { color: var(--ink-2); font-family: var(--body); font-size: 14px; }
.m { display: inline-block; min-width: 46px; text-align: center; padding: 3px 8px; border-radius: 999px; font: 500 11px var(--mono); letter-spacing: 0.04em; }
.m.get { background: #ebfbef; color: #1f8a3a; }
.m.post { background: var(--accent-soft); color: var(--accent); }
.m.put { background: #fff4e5; color: #a8640a; }
.ref-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.ref-notes .card { padding: 22px; }
.ref-notes h3 { font-size: 18px; }
.ref-notes p { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 860px) { .ref-notes { grid-template-columns: 1fr; } }
code { font-size: 0.9em; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }

/* the api scene: a request types itself, the response arrives line by line */
.sc-api { grid-template-columns: 1fr; padding: 22px; }
.sc-api .a-box { width: 100%; max-width: 520px; display: grid; gap: 12px; }
.sc-api .a-req, .sc-api .a-res { padding: 14px 16px; border-radius: 14px; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }
.sc-api .a-req { background: var(--ink); color: #e9e9ee; min-height: 120px; }
.sc-api .a-req .s { color: #a9b2ff; }
.sc-api .a-res { background: #fff; border: 1px solid var(--line); color: var(--ink-2); min-height: 170px; opacity: 0; transform: translateY(8px); transition: 0.5s var(--ease); }
.sc-api.t2 .a-res { opacity: 1; transform: none; }
.sc-api .a-res .l { display: block; opacity: 0; transform: translateX(-6px); transition: 0.35s var(--ease); }
.sc-api .a-res .l.on { opacity: 1; transform: none; }
.sc-api .a-res .s { color: var(--accent); }
.sc-api .a-res .n { color: #1f8a3a; }
.sc-api .a-h { display: flex; justify-content: space-between; align-items: center; font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sc-api .a-st { color: #1f8a3a; opacity: 0; transition: 0.3s; }
.sc-api.t2 .a-st { opacity: 1; }