/* MCPDoc site tokens. Same family as agentdoc.net and agentmesh.ai:
   Space Grotesk display, IBM Plex body and mono, blueprint grid. The lead
   accent here is the mint used for `seen`, because a mark is the one thing
   this format adds to a server's own documentation. Every mark is also
   spelled out in words, never signalled by colour alone. */
:root{
  --ink:#0B1116; --panel:#121B21; --panel-2:#16222A; --line:#1E2D36; --edge:#2A3D48;
  --paper:#E9F0EE; --dim:#9DB0AB; --faint:#6F8A84;
  --seen:#4FD6A9;
  --said:#8AA3B8;
  --gap:#C9973F;
  --accent:#4FD6A9;
  --disp:'Space Grotesk', sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --wire:'IBM Plex Mono', ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--ink); color:var(--paper); font-family:var(--body);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  background-position:-1px -1px;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 45% at 30% 0%, rgba(79,214,169,.07), transparent 60%),
    radial-gradient(70% 50% at 100% 10%, rgba(201,151,63,.05), transparent 55%),
    linear-gradient(180deg, rgba(11,17,22,.72), var(--ink) 62%);
}
a{ color:inherit; }

/* ---- shell ---- */
.layout{ position:relative; z-index:1; display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.rail{ border-right:1px solid var(--line); padding:26px 22px; position:sticky; top:0;
  align-self:start; height:100vh; overflow-y:auto; scrollbar-width:thin; }
.brand{ font-family:var(--wire); font-weight:600; font-size:.82rem; letter-spacing:.02em;
  display:flex; align-items:center; gap:9px; color:var(--paper); text-decoration:none; margin-bottom:30px; }
.brand .dot{ width:9px; height:9px; border-radius:2px; background:var(--seen);
  box-shadow:0 0 0 3px rgba(79,214,169,.15), 8px 0 0 -2px var(--said), 16px 0 0 -2px var(--gap); }
.rail .grp{ font-family:var(--wire); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); margin:16px 0 4px; }
.rail .grp:first-of-type{ margin-top:0; }
.rail nav a{ display:block; font-family:var(--wire); font-size:.8rem; color:var(--dim);
  text-decoration:none; padding:6px 0; border-left:2px solid transparent; padding-left:12px; margin-left:-12px; }
.rail nav a:hover{ color:var(--paper); }
.rail nav a.on{ color:var(--paper); border-left-color:var(--seen); }
.rail .foot{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--wire); font-size:.72rem; color:var(--faint); line-height:1.7; }
.rail .foot a{ color:var(--dim); }

.main{ min-width:0; }
.wrap{ max-width:940px; margin:0 auto; padding:0 40px 80px; }

/* ---- type ---- */
.eyebrow{ font-family:var(--wire); font-size:.76rem; letter-spacing:.04em; color:var(--dim); }
.eyebrow .tag{ color:var(--seen); }
h1,h2,h3{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.12; }
.lede{ color:var(--dim); font-size:1.12rem; max-width:62ch; }
p{ max-width:68ch; }
code{ font-family:var(--wire); font-size:.87em; background:var(--panel); border:1px solid var(--line);
  border-radius:4px; padding:1px 5px; }
pre{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  overflow-x:auto; font-family:var(--wire); font-size:.84rem; line-height:1.7; }
pre .c{ color:var(--faint); }
main a{ color:var(--seen); }

.hero{ padding:74px 0 40px; border-bottom:1px solid var(--line); }
.hero .eyebrow{ margin-bottom:22px; display:block; }
.hero h1{ font-size:clamp(2.2rem,4.6vw,3.4rem); margin:0 0 20px; max-width:19ch; text-wrap:balance; }
.hero .lede{ font-size:1.16rem; margin:0 0 30px; }
.cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ font-family:var(--wire); font-size:.86rem; font-weight:500; text-decoration:none;
  padding:12px 20px; border-radius:8px; border:1px solid var(--edge); display:inline-flex;
  align-items:center; gap:8px; color:var(--paper); }
.btn-go{ background:var(--seen); border-color:var(--seen); color:#06231A; }
.btn:hover{ border-color:var(--paper); }

.band{ padding:44px 0; border-bottom:1px solid var(--line); }
.band:last-child{ border-bottom:0; }
.band h2{ font-size:1.5rem; margin:0 0 14px; }
.band h3{ font-size:1rem; font-weight:600; font-family:var(--body); margin:28px 0 8px; }

/* ---- marks ---- */
.marks{ display:grid; gap:12px; margin:0 0 20px; max-width:68ch; }
.mkrow{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:16px; align-items:baseline;
  border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:14px 16px; }
.mk{ font-family:var(--wire); font-weight:600; font-size:.62rem; line-height:1.9; letter-spacing:.1em;
  text-transform:uppercase; padding:0 7px; border-radius:999px; border:1px solid currentColor; justify-self:start; }
.mk-seen{ color:var(--seen); } .mk-said{ color:var(--said); } .mk-none{ color:var(--gap); }

.quote{ border-left:3px solid var(--seen); padding:2px 0 2px 18px; margin:0 0 20px; color:var(--dim); }
.quote b{ color:var(--paper); font-weight:600; }

/* ---- field table ---- */
table.fields{ border-collapse:collapse; width:100%; font-size:.92rem; margin:0 0 18px; }
table.fields th, table.fields td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);
  vertical-align:top; }
table.fields th{ font-family:var(--wire); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); font-weight:600; }
table.fields td.nm{ font-family:var(--wire); color:var(--paper); white-space:nowrap; }
.scroller{ overflow-x:auto; }

@media(max-width:860px){
  .layout{ grid-template-columns:1fr; }
  .rail{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .wrap{ padding:0 20px 60px; }
  .hero{ padding:40px 0 30px; }
  .mkrow{ grid-template-columns:1fr; gap:6px; }
}