:root {
  --accent: var(--blue);
  --accent-soft: rgba(52, 89, 106, .16);
  --accent-bd: var(--blue-dark);
  --surface: rgba(14, 19, 24, .72);
  --surface-2: rgba(23, 34, 43, .58);
  --ink: var(--text);
  --ink-2: var(--text-2);
  --coral: #cf876f;
  --green: #86b394;
  --violet: #ae9acb;
  --violet-soft: rgba(81, 68, 104, .2);
  --violet-bd: #594b70;
  --amber-soft: rgba(208, 165, 97, .08);
  --amber-bd: #745b36;
  --code-bg: #090d10;
  --code-ink: #c4cecc;
  --c-key: #d9a76c;
  --c-fn: #8dbbd0;
  --c-str: #9fbd91;
  --c-cmt: #718083;
  --c-op: #c3a6cb;
}

.langgraph-cover .cover__layout { align-items: center; }
.langgraph-cover .cover__copy h1 { max-width: 720px; }
.langgraph-cover .flow { max-width: 420px; justify-self: end; }
.langgraph-cover .flow__step { grid-template-columns: 34px minmax(0, 1fr); }

.langgraph-article { padding-bottom: 64px; }
.langgraph-article .lesson-section { scroll-margin-top: 72px; }
.langgraph-article .section-head { display: block; margin-bottom: 28px; }
.langgraph-article .section-head > div { max-width: 800px; }
.langgraph-article .section-head .num,
.langgraph-article .section-head .tag { display: none; }
.langgraph-article .section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.langgraph-article .section-head p {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.85;
}
.langgraph-article p,
.langgraph-article li { line-height: 1.78; }
.langgraph-article code {
  padding: .1em .34em;
  border: 1px solid rgba(58, 76, 88, .7);
  border-radius: 4px;
  background: rgba(8, 12, 15, .62);
  color: #b9c9c8;
  font: .88em/1.5 var(--mono);
}

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.vs .mid { display: none; }
.vs .col { padding: 20px 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.vs .col h4 { margin: 0 0 13px; color: var(--text); font-size: 17px; }
.vs .col ul { margin: 0; padding-left: 18px; }
.vs .col li { margin: 7px 0; color: var(--muted); }
.vs .col b { color: var(--text-2); }
.vs .bad { border-top-color: #765244; }
.vs .good { border-top-color: var(--blue-dark); }

.def { display: flex; gap: 12px; margin-top: 22px; padding: 15px 18px; border-left: 2px solid var(--blue); background: rgba(52, 89, 106, .08); }
.def .q { display: none; }
.def .lbl { margin-bottom: 5px; color: var(--blue); font-size: 13px; font-weight: 650; }
.def .tx { color: var(--text-2); line-height: 1.78; }
.def b { color: var(--text); }

.ccard { margin: 16px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: rgba(14, 19, 24, .68); }
.ch { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ch .badge { color: var(--blue); font: 650 14px/1 var(--mono); }
.ch h3 { margin: 0; color: var(--text); font-size: 18px; }
.ch .en { margin-left: auto; color: var(--muted); font: 12px/1.5 var(--mono); }
.ccard .body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ccard .body > .k,
.ccard .body > .code-col { min-width: 0; padding: 18px 20px 20px; }
.ccard .body > .k { border-right: 1px solid var(--line); }
.ccard .body p { margin: 0 0 10px; color: var(--text-2); }
.ccard .body ul { margin: 8px 0 0; padding-left: 18px; }
.ccard .body li { color: var(--text-2); }
.ccard .body b { color: var(--text); }
.lab { margin-bottom: 12px; color: var(--muted); font: 12px/1.4 var(--mono); }

.codebar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: rgba(23, 34, 43, .58); }
.codebar .dots { display: none; }
.codebar .fn { color: var(--text-2); font: 12px var(--mono); }
.codebar .rt { margin-left: auto; color: var(--muted); font: 11px var(--mono); }
pre.code { margin: 0; padding: 16px 17px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 0 0 6px 6px; background: var(--code-bg); color: var(--code-ink); font: 13px/1.75 var(--mono); tab-size: 4; }
pre.code code { padding: 0; border: 0; background: transparent; }
.code .k { color: var(--c-key); }
.code .f { color: var(--c-fn); }
.code .s { color: var(--c-str); }
.code .c { color: var(--c-cmt); font-style: italic; }
.code .o { color: var(--c-op); }
.note { margin-top: 12px; color: var(--muted); font-size: 13px; }
.note b { color: var(--amber); }

.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.panel-title { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.panel-title h3 { margin: 0; color: var(--text); font-size: 16px; }
.panel-title span { color: var(--muted); font: 12px var(--mono); }
.agent-figure { margin: 0; padding: 24px 24px 18px; overflow-x: auto; }
.agent-figure svg { display: block; width: 100%; min-width: 860px; height: auto; }
.agent-figure figcaption { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.65; text-align: center; }
.agent-svg__terminal { fill: rgba(23, 34, 43, .72); stroke: var(--line-strong); stroke-width: 1.4; }
.agent-svg__terminal-text { fill: var(--text); font: 650 14px var(--mono); }
.agent-svg__node { fill: rgba(14, 19, 24, .84); stroke-width: 1.5; }
.agent-svg__node--agent { fill: rgba(52, 89, 106, .13); stroke: var(--blue-dark); }
.agent-svg__node--tools { fill: rgba(81, 68, 104, .13); stroke: #625376; }
.agent-svg__decision { fill: rgba(14, 19, 24, .72); stroke: #5d6870; stroke-width: 1.5; }
.agent-svg__title { fill: var(--text); font: 650 18px var(--sans); }
.agent-svg__body { fill: var(--muted); font: 14px var(--sans); }
.agent-svg__label { fill: var(--text-2); font: 13px var(--sans); }
.agent-svg__line { fill: none; stroke: #718083; stroke-width: 1.8; }
.agent-svg__loop { fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-dasharray: 7 7; }
.agent-svg__loop-title { fill: var(--amber); font: 13px var(--sans); }

.steps-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.steps-h { margin-bottom: 12px; color: var(--text-2); font-size: 14px; font-weight: 650; }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.steps .s { padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--text-2); font-size: 13px; }
.steps .ar { color: var(--muted); }
.steps .end { border-color: var(--blue-dark); color: var(--blue); }
.steps-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; }

.tip,
.callout { margin-top: 18px; padding: 15px 18px; border-left: 2px solid var(--blue); background: rgba(52, 89, 106, .08); color: var(--text-2); }
.tip { display: flex; gap: 10px; }
.tip .badge,
.callout .h { flex: 0 0 auto; color: var(--blue); font-size: 13px; font-weight: 650; }
.callout.warn { border-left-color: var(--amber); background: rgba(208, 165, 97, .06); }
.callout.warn .h { color: var(--amber); }

.subh { margin: 34px 0 14px; color: var(--text); font-size: 18px; font-weight: 650; }
.subh small { margin-left: 6px; color: var(--muted); font: 12px var(--mono); }
.cf { overflow-x: auto; border-radius: 6px; }
.cf table { width: 100%; min-width: 680px; border-collapse: collapse; color: var(--text-2); }
.cf th,
.cf td { padding: 14px 17px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.cf th { background: rgba(23, 34, 43, .62); color: var(--text); font-size: 13px; font-weight: 650; }
.cf th:first-child,
.cf td:first-child { width: 38%; color: var(--muted); }
.cf td b { color: var(--text); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mc,
.split .c { padding: 17px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.mc h4 { margin: 0 0 8px; color: var(--text); font-size: 15px; }
.mc p,
.split p { margin: 0; color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.split .hd { margin-bottom: 8px; color: var(--text); font-weight: 650; }
.split .yes { border-top-color: var(--blue-dark); }
.split .no { border-top-color: #765244; }

.foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.foot a { color: var(--text-2); text-decoration: none; }

@media (max-width: 860px) {
  .langgraph-cover .flow { max-width: none; justify-self: stretch; }
  .ccard .body,
  .vs,
  .grid3,
  .split { grid-template-columns: 1fr; }
  .ccard .body > .k { border-right: 0; border-bottom: 1px solid var(--line); }
  .agent-figure { padding: 18px 16px 14px; }
  .agent-figure svg { min-width: 820px; }
  .agent-figure figcaption { min-width: 820px; text-align: left; }
}

@media (max-width: 620px) {
  .ch { align-items: flex-start; flex-wrap: wrap; }
  .ch .en { width: 100%; margin-left: 26px; }
  .panel-title,
  .foot { align-items: flex-start; flex-direction: column; }
  .tip { display: block; }
  .tip .badge { display: inline-block; margin-bottom: 6px; }
}