:root { --bg:#090a0c; --panel:#11151a; --panel-2:#161c23; --border:rgba(176,189,204,.16); --accent:#76d6ff; --accent-soft:rgba(118,214,255,.1); --text:#f5f7fa; --muted:#aeb8c5; --dim:#738091; --mono:"IBM Plex Mono",monospace; --sans:"IBM Plex Sans",sans-serif; --display:"Space Grotesk",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:linear-gradient(145deg,#060709,#0b0e12 52%,#060709); color:var(--text); font-family:var(--sans); line-height:1.6; } .grid-bg { position:fixed; inset:0; z-index:-1; opacity:.22; background-image:linear-gradient(rgba(160,188,214,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(160,188,214,.05) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(#000,transparent 85%); }
.topbar { width:min(1320px,calc(100% - 48px)); min-height:78px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid var(--border); } .brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font-family:var(--display); font-weight:700; } .brand-mark { display:grid; place-items:center; width:34px; height:34px; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(118,214,255,.35); font:600 .76rem var(--mono); } nav { display:flex; flex-wrap:wrap; gap:18px; } nav a { color:var(--muted); text-decoration:none; font-size:.92rem; } nav a:hover { color:var(--accent); }
.docs-layout { width:min(1320px,calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns:225px minmax(0,820px); gap:76px; } .docs-nav { position:sticky; top:0; align-self:start; padding:38px 0; } .docs-nav a { display:flex; align-items:center; gap:8px; padding:6px 0; color:var(--muted); text-decoration:none; font-size:.9rem; } .docs-nav a:hover,.docs-nav a.is-current { color:var(--accent); } .nav-label { margin:18px 0 6px; color:var(--dim); text-transform:uppercase; letter-spacing:.13em; font:500 .68rem var(--mono); } .nav-label:first-child { margin-top:0; } .count { color:var(--dim); font:400 .72rem var(--mono); }
.docs-content { padding:66px 0 100px; } section { scroll-margin-top:28px; margin-bottom:82px; } .eyebrow { margin:0 0 12px; color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font:500 .73rem var(--mono); } h1,h2,h3 { font-family:var(--display); line-height:1.08; letter-spacing:-.035em; } h1 { max-width:650px; margin:0; font-size:clamp(2.8rem,6vw,5.2rem); } h2 { margin:0; font-size:clamp(1.75rem,3vw,2.5rem); } h3 { margin:0 0 10px; font-size:1.15rem; } p { color:var(--muted); } .lead { max-width:700px; margin:22px 0 28px; font-size:1.12rem; } code,pre { font-family:var(--mono); } :not(pre)>code { padding:.13em .35em; border-radius:4px; color:#c4efff; background:rgba(118,214,255,.08); font-size:.88em; }
.base-url,.callouts,.state-diagram,.response-grid { display:grid; gap:1px; border:1px solid var(--border); background:var(--border); } .base-url { grid-template-columns:auto 1fr auto; align-items:center; max-width:700px; background:var(--panel); padding:12px 14px; } .base-url span { color:var(--dim); font:500 .7rem var(--mono); text-transform:uppercase; letter-spacing:.12em; } .base-url code { padding-left:18px; color:var(--accent); overflow:auto; white-space:nowrap; } .copy-button { border:1px solid rgba(118,214,255,.25); background:transparent; color:var(--accent); padding:5px 9px; cursor:pointer; font:500 .72rem var(--mono); } .copy-button:hover { background:var(--accent-soft); }
.callouts { grid-template-columns:repeat(3,1fr); margin-top:24px; } .callouts div,.response-grid>div { padding:20px; background:var(--panel); } .callouts strong { display:block; margin-bottom:4px; font-size:.9rem; } .callouts span { color:var(--muted); font-size:.88rem; } .section-title { margin-bottom:22px; } .section-title .eyebrow { margin-bottom:8px; } .section-title p:last-child { margin-bottom:0; }
.code-card { margin-top:22px; overflow:hidden; border:1px solid var(--border); background:#080a0d; } .code-head { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border); color:var(--dim); font:500 .72rem var(--mono); } pre { margin:0; padding:20px; overflow:auto; color:#d6e6ec; font-size:.82rem; line-height:1.7; } pre code { background:none; color:inherit; padding:0; }
.endpoint-heading { display:flex; align-items:center; gap:12px; } .method { display:inline-block; flex:none; border-radius:3px; padding:3px 6px; font:600 .68rem var(--mono); letter-spacing:.04em; } .get { color:#9fe7c5; background:rgba(81,196,133,.15); } .post { color:#f3b4ff; background:rgba(205,112,235,.16); } .endpoint-meta { display:flex; justify-content:space-between; gap:18px; padding-bottom:12px; color:var(--dim); font-size:.86rem; border-bottom:1px solid var(--border); } .endpoint-meta b { color:#9fe7c5; font-family:var(--mono); } .endpoint-meta a { color:var(--accent); text-decoration:none; }
.field-table { margin-top:16px; border-top:1px solid var(--border); } .field-table>div { display:grid; grid-template-columns:180px 110px 1fr; gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid var(--border); } .field-table span { color:var(--dim); font:400 .78rem var(--mono); } .field-table p { margin:0; font-size:.92rem; }
.state-diagram { grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; margin:24px 0; background:var(--border); } .state-diagram div { padding:18px; background:var(--panel); } .state-diagram small { display:block; margin-bottom:3px; color:var(--dim); font:500 .68rem var(--mono); text-transform:uppercase; } .state-diagram span { padding:0 10px; color:var(--accent); } .notice { padding:18px 20px; border-left:3px solid var(--accent); background:var(--accent-soft); } .notice strong { font-family:var(--display); } .notice p { margin:4px 0 0; font-size:.92rem; }
.response-grid { grid-template-columns:repeat(3,1fr); } .response-grid p { margin:0; font-size:.9rem; } .tool-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .tool-card { padding:20px; border:1px solid var(--border); background:rgba(17,21,26,.9); } .tool-card-top { display:flex; justify-content:space-between; gap:10px; align-items:center; color:var(--dim); font-size:.78rem; } .state-mode { color:var(--accent); font:500 .68rem var(--mono); text-transform:uppercase; letter-spacing:.06em; } .tool-card h3 { margin-top:16px; } .tool-card p { min-height:48px; margin:0 0 16px; font-size:.9rem; } details { border-top:1px solid var(--border); padding-top:12px; } summary { color:var(--accent); cursor:pointer; font-size:.86rem; } details ul { display:grid; gap:8px; padding:12px 0 0; margin:0; list-style:none; } details li { display:flex; flex-direction:column; gap:2px; } details li span { color:var(--dim); font:400 .72rem var(--mono); }
@media (max-width:850px) { .topbar,.docs-layout { width:min(100% - 32px,720px); } .docs-layout { display:block; } .docs-nav { position:static; display:flex; flex-wrap:wrap; gap:0 16px; padding:20px 0; border-bottom:1px solid var(--border); } .docs-nav .nav-label { display:none; } .docs-nav a { padding:4px 0; } .docs-content { padding-top:42px; } .callouts,.response-grid { grid-template-columns:1fr; } .field-table>div { grid-template-columns:130px 1fr; } .field-table p { grid-column:2; } }
@media (max-width:600px) { .topbar { padding:14px 0; align-items:flex-start; flex-direction:column; } nav { gap:10px 16px; } h1 { font-size:2.8rem; } .base-url { grid-template-columns:1fr auto; } .base-url code { grid-row:2; grid-column:1 / -1; padding:10px 0 0; } .state-diagram { grid-template-columns:1fr; } .state-diagram span { text-align:center; padding:2px; transform:rotate(90deg); } .tool-grid { grid-template-columns:1fr; } .endpoint-meta { align-items:flex-start; flex-direction:column; gap:6px; } section { margin-bottom:60px; } }