/* MCP visual article. Plain diagrams, shared AMELFI tokens. */
.mcp-article-page { --faint: #879482; }
:root[data-theme="light"] .mcp-article-page { --faint: #65645b; }
.mcp-article-page .bs-btn { min-width: 24px; min-height: 24px; }
.mcp-article-page .f-col h3 { margin-bottom: 16px; color: var(--faint); font: 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; }

.mcp-article { --article-signal: var(--accent-ink); --article-signal-dim: var(--accent-dim); }
:root[data-theme="light"] .mcp-article { --article-signal: var(--text); --article-signal-dim: color-mix(in srgb,var(--text) 18%,transparent); }

.article-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.article-hero-grid { min-height: 650px; padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: center; position: relative; }
.article-hero-copy { position: relative; z-index: 1; }
.article-hero h1 { max-width: 9ch; }
.article-hero .sub { max-width: 48ch; margin-bottom: 32px; color: var(--muted); font-size: 18px; }
.article-meta { width: fit-content; display: flex; flex-wrap: wrap; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.article-meta span { padding: 8px 11px; background: var(--bg); color: var(--faint); font: 9px var(--pixel); }

.mcp-instrument { --i-bg:#080b08; --i-line:#263126; --i-text:#e8f0e4; --i-muted:#879482; --i-signal:#b6ff2e; background:var(--i-bg); color:var(--i-text); }
.trace-console { position: relative; z-index: 1; overflow: hidden; border: 1px solid var(--line-bright); box-shadow: var(--shadow-panel); }
:root[data-theme="light"] .trace-console { border-color:#14140f; box-shadow:5px 5px 0 rgba(20,20,15,.9); }
.instrument-head { min-height: 42px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--i-line); color: var(--i-muted); font: 10px var(--mono); letter-spacing: .12em; }
.instrument-head span { display: flex; align-items: center; gap: 9px; }
.instrument-head span i { width: 7px; height: 7px; background: var(--i-signal); animation: blink 2.4s steps(1) infinite; }
.instrument-head b { color: var(--i-signal); font: 9px var(--pixel); }
.hero-preview { position: relative; z-index: 1; overflow: hidden; border: 1px solid var(--i-line); box-shadow: var(--shadow-panel); }
:root[data-theme="light"] .hero-preview { border-color: #14140f; box-shadow: 5px 5px 0 rgba(20,20,15,.9); }
.hp-counters { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--i-line); }
.hp-counters > div { min-width: 0; padding: 24px 18px; background: var(--i-bg); }
.hp-counters b { margin-bottom: 8px; display: block; color: var(--i-signal); font: 24px var(--pixel); }
.hp-counters small { display: block; color: var(--i-muted); font: 10px/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hp-note { padding: 16px 18px; border-top: 1px solid var(--i-line); color: var(--i-muted); font: 11px/1.6 var(--mono); }
.hero-simple-art { overflow: hidden; background: var(--i-bg); }
.hero-simple-art img { display: block; width: 100%; height: auto; }

/* Native hero flow: You -> AI app -> MCP client -> MCP server -> tracker */
.hero-flow { padding: 42px 26px 26px; display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto; grid-template-rows: auto 46px; align-items: center; position: relative; background:
  radial-gradient(130% 130% at 50% -10%, rgba(182,255,46,.06), transparent 60%),
  radial-gradient(circle, rgba(182,255,46,.06) 1px, transparent 1.4px) 0 0/22px 22px, var(--i-bg); }
.hero-node { min-width: 84px; padding: 15px 8px 13px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; position: relative; border: 2px solid var(--i-line); background: linear-gradient(180deg,#10160e,#080b08); box-shadow: inset 0 1px 0 rgba(182,255,46,.06); color: var(--i-text); }
.hero-node .dg-ico { width: 30px; height: 30px; }
.hero-node b { font: 9px var(--pixel); line-height: 1.25; color: var(--i-text); }
.hero-node small { font: 9px var(--mono); letter-spacing: .01em; color: var(--i-muted); }
.hero-node.focus { border-color: var(--i-signal); color: var(--i-signal); box-shadow: inset 0 1px 0 rgba(182,255,46,.12), 0 0 0 1px var(--i-signal), 0 0 34px -8px var(--i-signal); }
.hero-node.focus .dg-ico, .hero-node.focus b { color: var(--i-signal); }
.hero-node.focus .dg-ico-mcp { width: 38px; height: 38px; }
.hero-node.focus::after { content:""; position:absolute; left:-2px; right:-2px; top:-2px; height:3px; background: var(--i-signal); }
.hero-trace { height: 2px; position: relative; background: linear-gradient(90deg, color-mix(in srgb,var(--i-signal) 12%,transparent), var(--i-signal)); box-shadow: 0 0 8px -2px var(--i-signal); }
.hero-trace::after { content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%); border-left:8px solid var(--i-signal); border-top:5px solid transparent; border-bottom:5px solid transparent; }
.hero-trace::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, var(--i-bg) 0 6px, transparent 6px 15px); background-size: 30px 100%; animation: wire-flow 1.1s linear infinite; }
.hero-trace span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-175%); white-space: nowrap; font: 7.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--i-muted); }
.hr-line { grid-column: 1 / -1; grid-row: 2; align-self: end; margin: 0 42px; height: 2px; position: relative; background: repeating-linear-gradient(90deg, color-mix(in srgb,var(--i-signal) 70%,transparent) 0 7px, transparent 7px 14px); background-size: 28px 100%; box-shadow: 0 0 7px -2px var(--i-signal); animation: wire-flow 1.6s linear infinite reverse; }
.hr-riser { grid-row: 2; align-self: stretch; justify-self: center; width: 2px; position: relative; background: repeating-linear-gradient(180deg, color-mix(in srgb,var(--i-signal) 70%,transparent) 0 6px, transparent 6px 12px); box-shadow: 0 0 7px -2px var(--i-signal); }
.hr-riser.hr-you { grid-column: 1; }
.hr-riser.hr-src { grid-column: 9; }
.hr-riser.hr-you::before { content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%); border-bottom:8px solid var(--i-signal); border-left:5px solid transparent; border-right:5px solid transparent; }
.hr-label { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: end; transform: translateY(50%); padding: 0 9px; background: var(--i-bg); color: var(--i-muted); font: 9px var(--pixel); letter-spacing: .1em; text-transform: uppercase; position: relative; z-index: 1; }
@media (prefers-reduced-motion:reduce) { .hr-line { animation: none; } }
@media (max-width:640px) { .hr-line { margin: 0 32px; } }
@media (prefers-reduced-motion:reduce) { .hero-trace::before, .hero-return i { animation:none; } }
@media (max-width:900px) { .hero-simple-art { overflow-x: auto; } .hero-flow { min-width: 540px; } }
@media (max-width:640px) { .hero-node { min-width: 68px; padding: 12px 6px 10px; gap: 7px; } .hero-node .dg-ico { width: 24px; height: 24px; } .hero-node.focus .dg-ico-mcp { width: 30px; height: 30px; } .hero-node small { display: none; } .hero-trace span { display: none; } }
.hero-simple-key { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--i-line); }
.hero-simple-key span { min-width: 0; padding: 12px 8px; background: var(--i-bg); text-align: center; }
.hero-simple-key b,.hero-simple-key small { display:block; }
.hero-simple-key b { color: var(--i-text); font: 9px var(--pixel); }
.hero-simple-key small { margin-top: 4px; color: var(--i-muted); font: 9px var(--mono); }
.hero-simple-key .focus { box-shadow: inset 0 2px 0 var(--i-signal); }
.hero-simple-key .focus b { color: var(--i-signal); }
.hero-standard { padding: 13px 16px; border-top: 1px dashed var(--i-line); color: var(--i-text); font: 11px/1.5 var(--mono); text-align: center; }

.section-intro { margin-bottom: 48px; display: grid; grid-template-columns: .7fr 1fr; column-gap: 72px; align-items: end; }
.section-intro .sec-label { grid-column: 1 / -1; }
.section-intro h2,.section-intro .lede { margin-bottom: 0; }

.grid13 { margin-top: 40px; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
@media (min-width:640px) { .grid13 { grid-template-columns: repeat(4,1fr); } }
.grid13-item { padding: 18px 18px 16px; position: relative; background: var(--bg); transition: background .2s; }
.grid13-item:hover { background: var(--panel-2); }
.grid13-item .tno { margin-bottom: 10px; display: block; color: var(--article-signal); font: 12px var(--pixel); }
.grid13-item h4 { color: var(--text); font-size: 13.5px; font-weight: 600; }
.grid13-item .sub { margin-top: 4px; display: block; color: var(--faint); font: 10.5px var(--mono); letter-spacing: .04em; }
.grid13-item.spacer { display: flex; align-items: center; background: var(--panel); }
.grid13-item.spacer p { color: var(--faint); font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.grid13-dl { margin-top: 28px; display: inline-flex; align-items: center; gap: 9px; }
.grid13-dl svg { flex: none; }

.lane-intro { margin-bottom: 48px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.lane-intro h2 { margin-bottom: 0; }
.lane-legend { display: flex; flex-wrap: wrap; gap: 20px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lane-legend span { display: flex; align-items: center; gap: 7px; }
.lane-legend i { width: 24px; height: 2px; display: inline-block; }
.setup-key { background: var(--muted); }.request-key { background: var(--article-signal); }.result-key { background: repeating-linear-gradient(90deg,var(--article-signal) 0 5px,transparent 5px 9px); }

.protocol-lane { position: relative; overflow: hidden; display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.lane-progress { position: absolute; z-index: 3; left: 73px; top: 48px; bottom: 48px; width: 2px; background: var(--line-bright); pointer-events: none; }
.lane-progress i { width: 100%; height: 100%; display: block; transform: scaleY(0); transform-origin: top; background: var(--article-signal); transition: transform .75s cubic-bezier(.2,.7,.2,1); }
.lane-step { position: relative; z-index: 1; min-height: 330px; display: grid; grid-template-columns: 74px .72fr 1.28fr; background: var(--bg); transition: background .25s ease,box-shadow .25s ease; }
.lane-step.is-active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--article-signal); }
.lane-index { position: relative; z-index: 4; padding: 32px 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; border-right: 1px solid var(--line); background: var(--bg); }
.lane-index span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-bright); background: var(--bg); color: var(--faint); font: 9px var(--mono); }
.lane-step.is-active .lane-index span { border-color: var(--article-signal); background: var(--panel-2); color: var(--article-signal); }
.lane-index b { color: var(--muted); font: 8px var(--pixel); letter-spacing: .08em; }
.lane-copy { padding: 44px; align-self: center; }
.lane-copy small { margin-bottom: 16px; display: block; color: var(--article-signal); font: 10px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.lane-copy h3 { max-width: 20ch; margin-bottom: 13px; font-size: 25px; line-height: 1.16; }
.lane-copy p { max-width: 48ch; color: var(--muted); font-size: 14.5px; }
.lane-copy code { color: var(--text); font: .86em var(--mono); }

.lane-visual { margin: 28px; align-self: stretch; }
.simple-diagram { min-height: 270px; padding: 28px; position: relative; border: 1px solid var(--line-bright); background: var(--panel); color: var(--text); }
:root[data-theme="light"] .simple-diagram { background: var(--panel); box-shadow: var(--shadow-panel); }
.simple-diagram b,.simple-diagram span,.simple-diagram small { position: relative; z-index: 1; }
.simple-diagram small { color: var(--muted); font: 11px var(--mono); }

.clients-simple { display: grid; grid-template-columns: 1fr 48px 1fr; grid-template-rows: 1fr auto; align-items: center; }
.simple-app,.server-column { display: grid; gap: 12px; }
.simple-app { padding: 18px; border: 2px solid var(--text); }
.simple-app > span { color: var(--article-signal); font: 10px var(--pixel); }
.simple-app b,.server-column b { padding: 12px 14px; border: 2px solid var(--line-bright); background: var(--bg); font-size: 14px; }
.simple-app small,.server-column small { margin-top: 4px; display: block; }
.pair-lines { display: grid; gap: 51px; }
.pair-lines i { height: 2px; background: var(--article-signal); }
.server-column b { border-color: var(--article-signal); }
.clients-simple figcaption { grid-column: 1 / -1; margin-top: 20px; color: var(--muted); font: 11px var(--mono); text-align: center; text-transform: uppercase; }

.transport-simple { display: grid; align-content: center; gap: 16px; }
.transport-row { min-height: 84px; padding: 14px; display: grid; grid-template-columns: 120px 70px 1fr 70px 62px; gap: 12px; align-items: center; border: 1px solid var(--line); background: var(--bg); }
.transport-row > b { color: var(--article-signal); font: 10px var(--pixel); }
.transport-row > span { padding: 10px 8px; border: 2px solid var(--line-bright); font: 13px var(--mono); text-align: center; }
.transport-row > i { height: 2px; position: relative; }
.transport-row > i::after { content:">"; position:absolute; right:-3px; top:-10px; color:var(--article-signal); font:14px var(--mono); }
.solid-line { background: var(--article-signal); }.dashed-line { background: repeating-linear-gradient(90deg,var(--article-signal) 0 7px,transparent 7px 12px); }
.transport-row > small { color: var(--text); text-align: right; }

.handshake-simple { display: grid; align-content: center; gap: 12px; }
.party-labels { display: flex; justify-content: space-between; color: var(--article-signal); font: 10px var(--pixel); }
.message-simple { min-height: 54px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--line-bright); background: var(--bg); font: 13px var(--mono); }
.message-simple i { color: var(--article-signal); font: 18px var(--mono); font-style: normal; }
.to-server { margin-right: 48px; }.to-client { margin-left: 48px; }
.handshake-simple figcaption { padding: 11px 14px; border: 2px solid var(--article-signal); color: var(--text); font: 12px var(--pixel); text-align: center; }
.handshake-simple figcaption b { margin-right: 8px; color: var(--article-signal); }

.discover-simple { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-content: center; }
.discover-simple article { min-height: 170px; padding: 18px; border: 2px solid var(--line-bright); background: var(--bg); }
.discover-simple article span { color: var(--article-signal); font: 10px var(--pixel); }
.discover-simple article b { margin: 16px 0 8px; display: block; font-size: 20px; }
.discover-simple article p { color: var(--muted); font-size: 13px; }

.tool-simple { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; }
.selected-tool,.input-chips,.schema-ok { min-height: 130px; padding: 18px; display: flex; flex-direction: column; justify-content: center; border: 2px solid var(--line-bright); background: var(--bg); }
.selected-tool b { margin: 8px 0; font-size: 18px; }.selected-tool code { color: var(--muted); font: 10px var(--mono); }
.input-chips { gap: 8px; }.input-chips span { padding: 9px 10px; border: 1px solid var(--line); font: 11px var(--mono); }
.schema-ok { align-items: center; border-color: var(--article-signal); text-align: center; }.schema-ok b { color: var(--article-signal); font-size: 28px; }.schema-ok span { font: 11px var(--pixel); }.schema-ok small { margin-top:7px; }
.flow-arrow,.return-arrow { color: var(--article-signal); font: 20px var(--mono); font-style: normal; }

.run-simple { display: grid; align-content: center; }
.run-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.run-path span { min-height: 78px; padding: 15px; display: grid; place-items: center; border: 2px solid var(--line-bright); background: var(--bg); font: 13px var(--mono); text-align: center; }
.run-path i { color: var(--article-signal); font: 18px var(--mono); font-style: normal; }
.blocked-branch { width: 160px; margin: 18px 0 0 auto; display: grid; grid-template-columns: 36px 1fr; align-items: center; }
.blocked-branch i { height: 2px; background: var(--deny); }.blocked-branch b { padding: 7px 9px; border: 2px solid var(--deny); color: var(--deny); font: 10px var(--pixel); }.blocked-branch small { grid-column: 2; margin-top: 5px; }

.return-simple { display: grid; grid-template-columns: 1.2fr auto 1fr; gap: 20px; align-items: center; }
.result-card,.answer-card { min-height: 150px; padding: 20px; display: flex; flex-direction: column; justify-content: center; border: 2px solid var(--line-bright); background: var(--bg); }
.result-card { border-color: var(--article-signal); text-align: center; }.result-card b { margin: 8px 0 2px; color: var(--article-signal); font: 44px var(--pixel); }.result-card span { font-size: 15px; }
.answer-card { position: relative; }.answer-card::before { content:""; width:14px; height:14px; position:absolute; right:-8px; top:50%; border-right:2px solid var(--line-bright); border-top:2px solid var(--line-bright); background:var(--bg); transform:translateY(-50%) rotate(45deg); }.answer-card p { margin-top: 12px; font-size: 19px; line-height: 1.3; }

.control-flow { min-height: 240px; padding: 38px 32px 70px; display: grid; grid-template-columns: repeat(3,1fr auto) 1fr; gap: 14px; align-items: center; }
.control-flow > div { min-height: 94px; padding: 16px; display: flex; flex-direction: column; justify-content: center; border: 2px solid var(--line-bright); background: var(--bg); }
.control-flow > div b { font-size: 16px; }.control-flow > div small { margin-top: 6px; }.control-flow > i { color: var(--article-signal); font: 18px var(--mono); font-style: normal; }
.control-flow .run-node { border-color: var(--article-signal); }
.simple-diagram .control-blocked { position: absolute; left: 61%; bottom: 22px; display: flex; align-items: center; gap: 0; }.control-blocked i { width: 34px; height: 2px; background: var(--deny); }.control-blocked b { padding: 6px 9px; border: 2px solid var(--deny); color: var(--deny); font: 10px var(--pixel); }
.control-note { margin: 18px 0 0; color: var(--faint); font: 10px var(--mono); }

.boundary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.boundary-grid > div { padding: 28px; background: var(--bg); }.boundary-grid > div:first-child { background: var(--panel-2); box-shadow: inset 0 3px 0 var(--article-signal); }
.boundary-grid > div > span { color: var(--article-signal); font: 9px var(--pixel); }
.boundary-grid ul { margin-top: 22px; list-style: none; }.boundary-grid li { padding: 10px 0 10px 18px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 14px; }.boundary-grid li::before { content:"+"; margin-left:-18px; float:left; color:var(--article-signal); font-family:var(--mono); }
.sources-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; }.source-list { list-style: none; }.source-list li { border-top: 1px solid var(--line); }.source-list a { padding: 18px 0; display: grid; grid-template-columns: 44px 1fr 20px; gap: 14px; align-items: center; }.source-list a:hover { color: var(--article-signal); }.source-list span { color: var(--faint); font: 9px var(--mono); }.source-list b { font-weight: 500; }.source-list i { color: var(--article-signal); font-style: normal; }
.article-cta .wrap { text-align: center; }.article-cta h2,.article-cta .lede { margin-left:auto; margin-right:auto; }.article-cta .cta-row { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

@media (max-width:1000px) {
  .article-hero-grid { min-height:0; grid-template-columns:1fr; gap:48px; }
  .section-intro { grid-template-columns:1fr; gap:16px; }.section-intro .sec-label { grid-column:1; }
  .lane-step { grid-template-columns:68px 1fr; }.lane-index { grid-row:1 / 3; }.lane-copy { padding:36px; }.lane-visual { grid-column:2; margin:0 28px 28px; }.lane-progress { left:67px; }
  .boundary-grid { grid-template-columns:1fr; }.sources-layout { grid-template-columns:1fr; gap:44px; }
}

@media (max-width:640px) {
  .article-hero-grid { padding-top:64px; padding-bottom:64px; }.article-hero h1 { font-size:48px; }
  .hp-counters { grid-template-columns:1fr; }
  .hero-simple-key { grid-template-columns:repeat(2,1fr); }.hero-simple-key span:last-child { grid-column:1 / -1; }
  .lane-intro { grid-template-columns:1fr; }.lane-legend { gap:12px; }
  .lane-step { grid-template-columns:1fr; }.lane-progress { display:none; }.lane-index { grid-row:auto; padding:13px 18px; flex-direction:row; justify-content:flex-start; border-right:0; border-bottom:1px solid var(--line); }.lane-index span { width:28px; height:28px; }.lane-copy { padding:28px 22px; }.lane-copy h3 { font-size:22px; }.lane-visual { grid-column:1; margin:0 14px 14px; }
  .simple-diagram { min-height:0; padding:20px; }
  .clients-simple { grid-template-columns:1fr 24px 1fr; }.simple-app { padding:12px; }.simple-app b,.server-column b { padding:10px 8px; font-size:12px; }.pair-lines { gap:47px; }.clients-simple figcaption { font-size:10px; }
  .transport-row { grid-template-columns:1fr 32px 1fr; gap:8px; }.transport-row > b { grid-column:1 / -1; }.transport-row > span:first-of-type { grid-column:1; }.transport-row > i { grid-column:2; }.transport-row > span:last-of-type { grid-column:3; }.transport-row > small { grid-column:1 / -1; text-align:left; }
  .to-server,.to-client { margin:0; }.message-simple { font-size:11px; }
  .discover-simple { grid-template-columns:1fr; }.discover-simple article { min-height:0; }
  .tool-simple { grid-template-columns:1fr; }.tool-simple .flow-arrow { width:22px; height:22px; display:grid; place-items:center; justify-self:center; transform:rotate(90deg); }.selected-tool,.input-chips,.schema-ok { min-height:0; }
  .run-path { grid-template-columns:1fr; }.run-path i { width:22px; height:22px; display:grid; place-items:center; justify-self:center; transform:rotate(90deg); }.blocked-branch { margin-top:14px; }
  .return-simple { grid-template-columns:1fr; }.return-arrow { font-size:0; text-align:center; }.return-arrow::before { content:"↓"; font:20px var(--mono); }.answer-card::before { display:none; }
  .control-flow { padding:22px; grid-template-columns:1fr; }.control-flow > i { width:22px; height:22px; display:grid; place-items:center; justify-self:center; transform:rotate(90deg); }.control-flow .control-blocked { width:auto; margin-top:4px; position:static; left:auto; justify-self:stretch; justify-content:flex-end; }
  .sources-layout { gap:28px; }
}

@media (prefers-reduced-motion:reduce) { .lane-progress i { transition:none; } }

/* ============================================================
   VISUAL RICHNESS LAYER — circuit / instrument language
   Adds depth, texture, drawn traces, ports and choreography
   over the plain schematic diagrams. Theme-aware.
   ============================================================ */

/* Shared node + glow tokens, scoped per diagram, theme-aware */
.simple-diagram {
  --node-fill: linear-gradient(180deg,#10160f 0%,#0a0d09 100%);
  --node-edge: inset 0 1px 0 rgba(182,255,46,.08), inset 0 0 0 1px rgba(255,255,255,.015);
  --node-glow: 0 14px 30px -22px rgba(0,0,0,.9);
  --accent-glow: 0 0 0 1px color-mix(in srgb,var(--article-signal) 30%,transparent), 0 0 26px -6px color-mix(in srgb,var(--article-signal) 65%,transparent);
  --tick: color-mix(in srgb,var(--article-signal) 55%,transparent);
  --grid-dot: rgba(182,255,46,.09);
  --panel-wash: radial-gradient(130% 130% at 100% 0%, rgba(182,255,46,.06), transparent 55%);
  overflow: hidden;
}
:root[data-theme="light"] .simple-diagram {
  --node-fill: linear-gradient(180deg,#fffefa 0%,#f2f1e8 100%);
  --node-edge: inset 0 1px 0 rgba(255,255,255,.8);
  --node-glow: 3px 3px 0 rgba(20,20,15,.9);
  --accent-glow: 3px 3px 0 rgba(20,20,15,.9);
  --tick: color-mix(in srgb,var(--text) 40%,transparent);
  --grid-dot: rgba(20,20,15,.06);
  --panel-wash: radial-gradient(130% 130% at 100% 0%, rgba(20,20,15,.035), transparent 55%);
}

/* Panel: dot-grid + accent wash + corner registration ticks */
.simple-diagram::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    var(--panel-wash),
    radial-gradient(circle, var(--grid-dot) 1px, transparent 1.5px);
  background-size: 100% 100%, 22px 22px;
  background-position: 0 0, 0 0;
  opacity:.75; transition: opacity .5s ease;
}
.simple-diagram::after {
  content:""; position:absolute; inset:11px; z-index:0; pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),
    linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),
    linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),
    linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick));
  background-position:
    left top, left top,           /* TL: h, v */
    right top, right top,         /* TR */
    left bottom, left bottom,     /* BL */
    right bottom, right bottom;   /* BR */
  background-size:
    13px 1px, 1px 13px,
    13px 1px, 1px 13px,
    13px 1px, 1px 13px,
    13px 1px, 1px 13px;
  opacity:.55;
}
.lane-step.is-active .simple-diagram::before { opacity:1; }

/* Node depth: gradient fill, hairline highlight, soft base shadow.
   Applies to the many box primitives across the diagrams. */
.simple-app b, .server-column b,
.transport-row > span,
.message-simple,
.discover-simple article,
.selected-tool, .input-chips, .schema-ok,
.run-path span,
.control-flow > div,
.result-card, .answer-card {
  background-image: var(--node-fill);
  box-shadow: var(--node-edge), var(--node-glow);
}

/* Accent nodes: outer glow so the "signal" reads through the flow */
.server-column b,
.schema-ok,
.result-card,
.control-flow .run-node,
.handshake-simple figcaption,
.discover-simple article {
  box-shadow: var(--node-edge), var(--accent-glow);
}

/* The AI-app container gets a faint interior wash */
.simple-app { background-image: linear-gradient(180deg, rgba(182,255,46,.04), transparent 60%); }
:root[data-theme="light"] .simple-app { background-image:none; }

/* Connection ports where the pair-lines meet nodes (step 01) */
.clients-simple .simple-app b, .clients-simple .server-column b { position:relative; }
.clients-simple .simple-app b::after,
.clients-simple .server-column b::after {
  content:""; position:absolute; top:50%; width:7px; height:7px;
  transform:translateY(-50%);
  background:var(--article-signal); z-index:2;
  box-shadow:0 0 9px color-mix(in srgb,var(--article-signal) 80%,transparent);
}
.clients-simple .simple-app b::after { right:-9px; }
.clients-simple .server-column b::after { left:-9px; }
:root[data-theme="light"] .clients-simple .simple-app b::after,
:root[data-theme="light"] .clients-simple .server-column b::after { box-shadow:none; }

/* Live wires: pair-lines glow, energize on active */
.pair-lines i { position:relative; box-shadow:0 0 10px -1px color-mix(in srgb,var(--article-signal) 60%,transparent); }
:root[data-theme="light"] .pair-lines i { box-shadow:none; }
.pair-lines i::before {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(6,8,6,.55) 0 5px, transparent 5px 12px);
  background-size:24px 100%; opacity:0;
}
.lane-step.is-active .pair-lines i::before { opacity:1; animation:wire-flow 1s linear infinite; }

/* Drawn traces + arrowheads (replace thin glyph arrows) — rightward */
.tool-simple .flow-arrow,
.run-simple .run-path > i,
.control-flow > i {
  font-size:0 !important; color:transparent;
  position:relative; align-self:center; justify-self:center;
  width:48px; height:14px;
}
.tool-simple .flow-arrow::before,
.run-simple .run-path > i::before,
.control-flow > i::before {
  content:""; position:absolute; left:2px; top:50%; transform:translateY(-50%);
  width:calc(100% - 9px); height:2px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--article-signal) 15%,transparent), var(--article-signal));
  box-shadow:0 0 8px -2px color-mix(in srgb,var(--article-signal) 70%,transparent);
}
.tool-simple .flow-arrow::after,
.run-simple .run-path > i::after,
.control-flow > i::after {
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  border-left:8px solid var(--article-signal);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
:root[data-theme="light"] .tool-simple .flow-arrow::before,
:root[data-theme="light"] .run-simple .run-path > i::before,
:root[data-theme="light"] .control-flow > i::before { box-shadow:none; }

/* Leftward drawn trace (result returns to the app) */
.return-simple .return-arrow {
  font-size:0 !important; color:transparent;
  position:relative; align-self:center; justify-self:center;
  width:48px; height:14px;
}
.return-simple .return-arrow::before {
  content:""; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:calc(100% - 9px); height:2px;
  background:linear-gradient(270deg, color-mix(in srgb,var(--article-signal) 15%,transparent), var(--article-signal));
  box-shadow:0 0 8px -2px color-mix(in srgb,var(--article-signal) 70%,transparent);
}
.return-simple .return-arrow::after {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  border-right:8px solid var(--article-signal);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}

/* Transport lines: triangle arrowheads + flowing signal on active */
.transport-row > i::after {
  content:""; right:-1px; top:50%; transform:translateY(-50%);
  border-left:7px solid var(--article-signal);
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  font:0/0 a;
}
.solid-line, .dashed-line { box-shadow:0 0 9px -3px color-mix(in srgb,var(--article-signal) 70%,transparent); }
:root[data-theme="light"] .solid-line, :root[data-theme="light"] .dashed-line { box-shadow:none; }
.lane-step.is-active .solid-line { background-size:200% 2px; animation:wire-flow-solid 1.1s linear infinite; }
.lane-step.is-active .dashed-line { animation:wire-flow 0.9s linear infinite; }

/* Handshake directional glyphs: give them presence */
.message-simple i { text-shadow:0 0 12px color-mix(in srgb,var(--article-signal) 60%,transparent); }
:root[data-theme="light"] .message-simple i { text-shadow:none; }

/* Discover primitive cards: accent top-rail + subtle hover lift */
.discover-simple article { position:relative; transition:transform .25s ease, box-shadow .25s ease; }
.discover-simple article::before {
  content:""; position:absolute; left:-2px; right:-2px; top:-2px; height:3px;
  background:var(--article-signal); z-index:2; opacity:.85;
}
.discover-simple article:hover { transform:translateY(-3px); }

/* Selected-tool / schema flow: enrich the code + check marks */
.selected-tool code { text-shadow:0 0 10px color-mix(in srgb,var(--article-signal) 30%,transparent); }
.schema-ok b, .handshake-simple figcaption b, .result-card b {
  text-shadow:0 0 16px color-mix(in srgb,var(--article-signal) 55%,transparent);
}
:root[data-theme="light"] .selected-tool code,
:root[data-theme="light"] .schema-ok b,
:root[data-theme="light"] .handshake-simple figcaption b,
:root[data-theme="light"] .result-card b { text-shadow:none; }

/* Deny branch: red glow so "blocked" reads as a live tripwire */
.blocked-branch i, .control-blocked i { box-shadow:0 0 10px -2px var(--deny); }
.blocked-branch b, .control-blocked b { box-shadow:0 0 20px -8px var(--deny); text-shadow:0 0 12px color-mix(in srgb,var(--deny) 45%,transparent); }
:root[data-theme="light"] .blocked-branch i, :root[data-theme="light"] .control-blocked i,
:root[data-theme="light"] .blocked-branch b, :root[data-theme="light"] .control-blocked b { box-shadow:none; text-shadow:none; }

/* Lane progress rail: glowing fill along the number-column divider */
.lane-progress i { position:relative; box-shadow:0 0 14px -1px color-mix(in srgb,var(--article-signal) 75%,transparent); }
:root[data-theme="light"] .lane-progress i { box-shadow:none; }
.lane-step.is-active .lane-index span {
  box-shadow:0 0 0 1px var(--article-signal), 0 0 20px -6px color-mix(in srgb,var(--article-signal) 70%,transparent);
}
:root[data-theme="light"] .lane-step.is-active .lane-index span { box-shadow:none; }

/* Boundary grid: hover glow + accent header rail on hover */
.boundary-grid > div { position:relative; transition:background .25s ease; }
.boundary-grid > div:hover { background:var(--panel-2); }
.boundary-grid > div:hover > span { text-shadow:0 0 14px color-mix(in srgb,var(--article-signal) 50%,transparent); }
:root[data-theme="light"] .boundary-grid > div:hover > span { text-shadow:none; }

/* Sources list: sliding accent + glow on hover */
.source-list a { transition:padding-left .2s ease, color .2s ease; }
.source-list li { position:relative; }
.source-list a::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--article-signal); transform:scaleY(0); transform-origin:center;
  transition:transform .25s ease;
}
.source-list a:hover { padding-left:12px; }
.source-list a:hover::before { transform:scaleY(1); }
.source-list a:hover i { text-shadow:0 0 12px color-mix(in srgb,var(--article-signal) 60%,transparent); }
:root[data-theme="light"] .source-list a:hover i { text-shadow:none; }

/* Hero instrument: energized key focus + head glow */
.instrument-head span i { box-shadow:0 0 10px 1px color-mix(in srgb,var(--i-signal) 70%,transparent); }
.hero-simple-key .focus { position:relative; }
.hero-simple-key .focus::after {
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--i-signal); box-shadow:0 0 12px 1px color-mix(in srgb,var(--i-signal) 70%,transparent);
}

@keyframes wire-flow { to { background-position:24px 0; } }
@keyframes wire-flow-solid { to { background-position:-40px 0; } }

@media (prefers-reduced-motion:reduce) {
  .lane-step.is-active .pair-lines i::before,
  .lane-step.is-active .solid-line,
  .lane-step.is-active .dashed-line { animation:none; }
}

@media (max-width:640px) {
  /* Keep drawn arrows sensible when stacked vertically */
  .tool-simple .flow-arrow, .run-simple .run-path > i, .control-flow > i,
  .return-simple .return-arrow { transform:rotate(90deg); width:40px; }
  .simple-diagram::after { inset:8px; }
}

/* ---- Diagram icon system: thin line icons on every node & gate ---- */
.dg-ico { flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1; }
/* Official MCP mark is stroked at a much larger native scale */
.dg-ico.dg-ico-mcp { stroke-width:12; }

/* Discover primitives: prominent accent icon per card */
.discover-simple article .dg-ico { width:38px; height:38px; margin-bottom:16px; display:block; color:var(--article-signal); filter:drop-shadow(0 0 9px color-mix(in srgb,var(--article-signal) 42%,transparent)); }
:root[data-theme="light"] .discover-simple article .dg-ico { filter:none; }
.discover-simple article b { margin-top:14px; }

/* Control-flow gates: icon stacked above the label */
.control-flow > div .dg-ico { width:30px; height:30px; margin-bottom:12px; color:var(--article-signal); }

/* Run path: icon centered above each step */
.run-path span { gap:11px; }
.run-path span .dg-ico { width:30px; height:30px; color:var(--article-signal); }

/* Tool step */
.selected-tool .dg-ico, .input-chips .dg-ico { width:28px; height:28px; margin-bottom:10px; color:var(--article-signal); }

/* Return step */
.result-card .dg-ico { width:32px; height:32px; margin:0 auto 10px; display:block; color:var(--article-signal); }
.answer-card small { display:flex; align-items:center; gap:8px; }
.answer-card small .dg-ico { width:20px; height:20px; color:var(--article-signal); }

/* Transport row labels */
.transport-row > b { display:flex; align-items:center; gap:8px; }
.transport-row > b .dg-ico { width:22px; height:22px; }

/* Clients: AI-app tag icon, and a stacked icon on each node (MCP mark for
   the client connectors, server rack for the services) */
.simple-app > span { display:inline-flex; align-items:center; gap:8px; }
.simple-app > span .dg-ico { width:20px; height:20px; }
.clients-simple .simple-app b .dg-ico,
.clients-simple .server-column b .dg-ico { display:block; margin:0 0 11px; color:var(--article-signal); }
.clients-simple .server-column b .dg-ico { width:26px; height:26px; }
.clients-simple .simple-app b .dg-ico-mcp { height:28px; width:28px; }

/* Handshake ready */
.handshake-simple figcaption .dg-ico { width:20px; height:20px; margin-right:8px; vertical-align:-4px; color:var(--article-signal); }

/* Deny gates: red icon */
.blocked-branch b .dg-ico, .control-blocked b .dg-ico { width:16px; height:16px; margin-right:6px; vertical-align:-3px; color:var(--deny); stroke-width:2; }

/* Boundary grid headers */
.boundary-grid > div > span { display:inline-flex; align-items:center; gap:9px; }
.boundary-grid > div > span .dg-ico { width:20px; height:20px; }
.boundary-grid > div > span .dg-ico-mcp { width:22px; height:22px; }