/* BKIR — sitio estático. Sin dependencias ni build. */
:root {
  --bg: #0b0e14;
  --bg-soft: #11151f;
  --panel: #0d1117;
  --surface: #ffffff;
  --ink: #1c2230;
  --ink-soft: #586079;
  --line: #e4e8f0;
  --accent: #6366f1;
  --accent-2: #8b5cf6;
  --code-bg: #0d1117;
  --code-ink: #c9d1d9;
  --code-comment: #8b949e;
  --code-string: #a5d6ff;
  --code-key: #79c0ff;
  --code-kw: #ff7b72;
  --code-num: #d2a8ff;
  --code-anno: #ffa657;
  --max: 1180px;
  --radius: 14px;
  --kind-voc: #d98324;
  --kind-type: #0d9488;
  --kind-cond: #e11d62;
  --kind-fn: #8b5cf6;
  --kind-io: #2563eb;
  --kind-chn: #0891b2;
  --kind-op: #16a34a;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 24px rgba(16,24,40,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #f7f8fb;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; color: #0f1422; font-weight: 700; letter-spacing: -.01em; }
code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,248,251,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .container { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #0f1422; letter-spacing: -.02em; font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8rem;
}
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.cta {
  background: #0f1422; color: #fff; padding: 8px 16px; border-radius: 9px;
}
.nav-links a.cta:hover { background: #232a3b; }
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang-switch button {
  font: inherit; font-size: .8rem; font-weight: 700; padding: 6px 10px; border: 0; cursor: pointer;
  background: #fff; color: var(--ink-soft);
}
.lang-switch button.active { background: #0f1422; color: #fff; }
.lang-switch button:not(.active):hover { background: #eef0f6; }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(700px 380px at 0% 0%, rgba(99,102,241,.16), transparent 55%),
    #0b0e14;
  color: #e8ebf5;
  padding: 88px 0 72px;
  border-bottom: 1px solid #1c2233;
}
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.5vw, 3.4rem); margin: 0 0 18px; max-width: 18ch; }
.hero p.lead { font-size: clamp(1.05rem, 1.8vw, 1.28rem); color: #aeb6cc; max-width: 60ch; margin: 0 0 28px; }
.hero .pill {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #c4b5fd; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 22px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem;
  padding: 13px 22px; border-radius: 11px; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.btn-primary:hover { text-decoration: none; filter: brightness(1.07); }
.btn-ghost { background: transparent; color: #e8ebf5; border-color: #2c3346; }
.btn-ghost:hover { text-decoration: none; background: #161b28; }

/* ---------- sections ---------- */
section { padding: 64px 0; }
section.tight { padding: 44px 0; }
.eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; margin: 0 0 10px; }
h2.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 14px; }
.section-intro { color: var(--ink-soft); max-width: 65ch; font-size: 1.06rem; margin: 0 0 32px; }

.principle {
  background: linear-gradient(135deg, #11151f, #171c2b);
  color: #e8ebf5; border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow);
}
.principle .big {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; color: #fff; margin: 0 0 16px; letter-spacing: -.01em;
}
.principle .big em { color: #c4b5fd; font-style: normal; }
.principle p { color: #aeb6cc; margin: 0 0 12px; max-width: 70ch; }
.principle p:last-child { margin-bottom: 0; }

/* ---------- kind cards ---------- */
.kinds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.kind-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); border-top: 3px solid var(--kc, var(--accent));
}
.kind-card h3 { margin: 0 0 6px; font-size: 1.12rem; display: flex; align-items: center; gap: 10px; }
.kind-card p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.badge {
  font-family: ui-monospace, monospace; font-size: .74rem; font-weight: 700; color: #fff;
  background: var(--kc, var(--accent)); padding: 3px 8px; border-radius: 6px; letter-spacing: .02em;
}
.k-voc { --kc: var(--kind-voc); } .k-type { --kc: var(--kind-type); } .k-cond { --kc: var(--kind-cond); }
.k-fn { --kc: var(--kind-fn); } .k-io { --kc: var(--kind-io); } .k-chn { --kc: var(--kind-chn); } .k-op { --kc: var(--kind-op); }

/* ---------- feature row ---------- */
.cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.feature h3 { margin: 0 0 8px; font-size: 1.08rem; }
.feature p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ---------- code ---------- */
.code {
  background: var(--code-bg); border-radius: 12px; overflow: hidden; border: 1px solid #1f2533;
  box-shadow: var(--shadow);
}
.code-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: #161b26; border-bottom: 1px solid #1f2533; font-size: .8rem; color: #8b949e;
}
.code-lang { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .72rem; }
.code-lang.java { color: #ffa657; }
.code-lang.bkir { color: #a5d6ff; }
.copy-btn {
  margin-left: auto; background: #21283a; color: #c9d1d9; border: 1px solid #2c3346;
  border-radius: 7px; padding: 4px 10px; font-size: .76rem; cursor: pointer; font-weight: 600;
}
.copy-btn:hover { background: #2c3346; }
.copy-btn.ok { color: #56d364; border-color: #2ea043; }
pre { margin: 0; padding: 16px 18px; overflow-x: auto; }
pre code { font-size: .855rem; line-height: 1.6; color: var(--code-ink); white-space: pre; }
.tok-comment { color: var(--code-comment); font-style: italic; }
.tok-string { color: var(--code-string); }
.tok-key { color: var(--code-key); }
.tok-kw { color: var(--code-kw); }
.tok-num { color: var(--code-num); }
.tok-anno { color: var(--code-anno); }

/* ---------- patterns page layout ---------- */
.layout { display: grid; grid-template-columns: 248px 1fr; gap: 40px; align-items: start; }
.sidebar { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding-bottom: 20px; }
.sidebar h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 18px 0 8px; }
.sidebar a {
  display: block; padding: 6px 12px; border-radius: 8px; color: var(--ink-soft);
  font-size: .92rem; font-weight: 500; border-left: 2px solid transparent;
}
.sidebar a:hover { background: #eef0f6; text-decoration: none; color: var(--ink); }
.sidebar a.active { color: var(--accent); background: #eef0fe; border-left-color: var(--accent); font-weight: 600; }

.pattern { padding: 18px 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 8px; scroll-margin-top: 84px; }
.pattern:last-child { border-bottom: none; }
.pattern > h2 { font-size: 1.5rem; margin: 0 0 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pattern .uses { display: flex; gap: 6px; flex-wrap: wrap; }
.pattern .uses .badge { font-size: .68rem; }
.pattern .desc { color: var(--ink-soft); margin: 4px 0 22px; max-width: 72ch; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.pair .arrow { display: none; }
.callout {
  margin-top: 18px; background: #f4f1ff; border: 1px solid #e0d8ff; border-left: 3px solid var(--accent-2);
  border-radius: 10px; padding: 14px 18px; color: #3b3360; font-size: .95rem;
}
.callout strong { color: #2a2350; }
.callout.warn { background: #fff7ed; border-color: #fed7aa; border-left-color: #ea580c; color: #7c3a12; }
.callout.warn strong { color: #7c2d12; }

/* ---------- footer ---------- */
footer { background: #0b0e14; color: #8b93a7; padding: 40px 0; border-top: 1px solid #1c2233; }
footer .container { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
footer a { color: #c4b5fd; }

.muted { color: var(--ink-soft); }
.center { text-align: center; }
.mt0 { margin-top: 0; }

/* ---------- reference tables ---------- */
.reftable {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); margin: 6px 0 8px; font-size: .94rem;
}
.reftable th, .reftable td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.reftable thead th { background: #f0f2f8; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 700; }
.reftable tbody tr:last-child td { border-bottom: none; }
.reftable tbody tr:hover { background: #f8f9fc; }
.reftable code {
  background: #eef0f6; padding: 2px 7px; border-radius: 6px; font-size: .85em;
  color: #3b3360; white-space: nowrap; font-weight: 600;
}
.reftable .feel code { background: #e7f0ff; color: #1e40af; }
.reftable .java code { background: #fdf0e6; color: #9a4a17; }
.reftable td.note { color: var(--ink-soft); white-space: normal; font-size: .9rem; }
.reftable td.note code { white-space: normal; font-weight: 500; }
.table-wrap { overflow-x: auto; }

/* ---------- explorador visual ---------- */
.ex-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.ex-toolbar label { font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.ex-toolbar select, .ex-toolbar button, .ex-file-btn {
  font: inherit; font-size: .92rem; padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 600; color: var(--ink);
}
.ex-toolbar select { min-width: 240px; }
.ex-toolbar button.primary { background: #0f1422; color: #fff; border-color: #0f1422; }
.ex-toolbar button:hover, .ex-file-btn:hover { border-color: var(--accent); }
.ex-toolbar .spacer { margin-left: auto; }
.ex-paste { width: 100%; min-height: 120px; font-family: ui-monospace, monospace; font-size: .82rem;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 18px; display: none; }
.ex-paste.show { display: block; }

.ex-ophead { background: linear-gradient(135deg,#11151f,#171c2b); color: #e8ebf5;
  border-radius: 14px; padding: 20px 24px; margin-bottom: 18px; box-shadow: var(--shadow); }
.ex-ophead h2 { color: #fff; margin: 0 0 4px; font-size: 1.3rem; }
.ex-ophead h2 input { font: inherit; background: transparent; border: 1px dashed transparent; color: #fff;
  border-radius: 6px; padding: 2px 6px; width: 100%; }
.ex-ophead h2 input:hover, .ex-ophead h2 input:focus { border-color: #3c465e; outline: none; background:#0d1117; }
.ex-ophead .op-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #aeb6cc; font-size: .9rem; margin-top: 8px; }
.ex-ophead .op-meta b { color: #c4b5fd; font-weight: 600; }
.ex-ophead code { color: #a5d6ff; }
.ex-bind { display:inline-flex; gap:6px; align-items:center; background:#0d1117; border:1px solid #1f2533; padding:3px 9px; border-radius:8px; }

.ex-main { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
.ex-flow { min-width: 0; }
.ex-aside { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.ex-aside .aside-head { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700;
  display: flex; align-items: center; gap: 10px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.ex-aside .aside-body { padding: 12px 16px; }
.ex-back { font-size: .85rem; color: var(--accent); cursor: pointer; font-weight: 600; }

/* nodos del flujo */
.flow-col { display: flex; flex-direction: column; }
.connector { width: 2px; height: 18px; background: var(--line); margin: 0 auto; }
.node {
  border: 1px solid var(--line); border-left: 4px solid var(--nc, var(--accent));
  background: var(--surface); border-radius: 11px; padding: 12px 15px; box-shadow: var(--shadow);
  cursor: pointer; transition: box-shadow .12s, transform .12s;
}
.node:hover { box-shadow: 0 2px 6px rgba(16,24,40,.1), 0 10px 28px rgba(16,24,40,.12); }
.node.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.node .node-top { display: flex; align-items: center; gap: 9px; }
.node .ntag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--nc, var(--accent)); padding: 2px 7px; border-radius: 5px; }
.node .ntitle { font-weight: 700; font-size: .98rem; }
.node .nsub { color: var(--ink-soft); font-size: .88rem; margin-top: 4px; }
.node .nsub code, .node .ntitle code { background: #eef0f6; padding: 1px 6px; border-radius: 5px; font-size: .85em; }
.node .exits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.exit-chip { font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: #fdeef2; color: #b21e4b; border: 1px solid #f6cdd9; cursor: pointer; white-space: nowrap; }
.exit-chip.ok { background: #e9f7ee; color: #15803d; border-color: #bfe6cb; }
.exit-chip.acc { background: #fdf2e3; color: #9a5b12; border-color: #f3dcb6; }
.exit-chip:hover { filter: brightness(.97); text-decoration: none; }

/* contenedores forEach / effect */
.box { border: 1px dashed #c3c9d6; border-radius: 12px; padding: 12px; background: #fafbfe; }
.box.tx { border-style: solid; border-color: #c8b6f0; background: #faf7ff; }
.box-head { font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.box-head .bx { background: #475569; color: #fff; border-radius: 5px; padding: 2px 7px; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; }
.box.tx .box-head .bx { background: #7c4ddb; }

/* salidas */
.out-card { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; border-left: 4px solid var(--oc, #94a3b8); }
.out-card.hl { box-shadow: 0 0 0 2px var(--accent); }
.out-card.flash { animation: flashring 1.1s ease; }
@keyframes flashring { 0%,100%{ box-shadow:none } 25%{ box-shadow:0 0 0 3px var(--accent) } }
.out-card .out-id { font-family: ui-monospace, monospace; font-weight: 700; font-size: .82rem; }
.out-card .rb { font-size: .68rem; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; color: #fff; margin-left: 6px; }
.rb.success { background: #16a34a; } .rb.error { background: #e11d62; } .rb.accepted { background: #d98324; }
.out-card .out-field { font-size: .86rem; color: var(--ink-soft); margin-top: 6px; }
.out-card .out-field code { background: #eef0f6; padding: 1px 5px; border-radius: 4px; }
.out-card input.edit { width: 100%; font: inherit; font-size: .86rem; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; margin-top: 4px; }

/* detalle de unidad */
.kv { display: grid; grid-template-columns: 92px 1fr; gap: 4px 12px; font-size: .88rem; margin: 8px 0; }
.kv dt { color: var(--ink-soft); font-weight: 600; }
.kv dd { margin: 0; }
.kv code { background: #eef0f6; padding: 1px 6px; border-radius: 5px; font-size: .9em; }
.detail-pre { background: var(--code-bg); color: var(--code-ink); border-radius: 9px; padding: 12px; font-family: ui-monospace, monospace; font-size: .8rem; overflow-x: auto; white-space: pre; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 18px; font-size: .82rem; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* resumen del servicio */
.op-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sum-chip { background: #0d1117; border: 1px solid #1f2533; color: #aeb6cc; padding: 3px 10px; border-radius: 999px; font-size: .82rem; }
.sum-chip b { color: #fff; }
.sum-flag { padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.sum-flag.tx { background: rgba(124,77,219,.2); color: #c4b5fd; border: 1px solid rgba(124,77,219,.4); }
.sum-flag.async { background: rgba(8,145,178,.18); color: #67e8f9; border: 1px solid rgba(8,145,178,.4); }

/* validación en vivo */
.val-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 18px; }
.val-head { display: flex; align-items: center; gap: 12px; }
.val-badge { margin-left: auto; font-size: .8rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.val-badge.ok { background: #e9f7ee; color: #15803d; }
.val-badge.warn { background: #fff7ed; color: #b45309; }
.val-badge.err { background: #fdeef2; color: #b21e4b; }
.val-list { margin: 10px 0 0; padding-left: 4px; list-style: none; font-size: .86rem; }
.val-list li { padding: 3px 0; }
.val-list .ve { color: #b21e4b; }
.val-list .vw { color: #9a5b12; }

/* transporte + links inversos en salidas */
.transport { float: right; font-size: .74rem; font-weight: 700; color: #475569; background: #eef0f6; padding: 2px 8px; border-radius: 6px; }
.src-chip { display: inline-block; font-size: .74rem; background: #eef0f6; color: #475569; border-radius: 999px; padding: 2px 8px; margin: 2px 4px 0 0; }
.out-card .edit { width: 100%; }

/* ---------- diagrama BPMN ---------- */
.diag-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.zoom-ctl { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.zoom-ctl button { font: inherit; font-weight: 700; font-size: .85rem; padding: 6px 12px; border: 0; border-right: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); }
.zoom-ctl button:last-child { border-right: 0; }
.zoom-ctl button:hover { background: #eef0f6; }
.add-form { margin-bottom: 10px; }
.add-form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); }
.add-form-row select, .add-form-row .af-in { font: inherit; font-size: .9rem; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; }
.af-fields { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.add-form-row button { font: inherit; font-size: .9rem; font-weight: 600; padding: 6px 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.add-form-row button.primary { background: #0f1422; color: #fff; border-color: #0f1422; }

.bpmn-viewport { position: relative; overflow: hidden; height: 72vh; min-height: 440px; background: #fbfcfe; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); cursor: grab; }
.bpmn-viewport.grabbing { cursor: grabbing; }
.bpmn-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.bpmn-canvas { position: relative; }

.struct-ctl { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.struct-ctl .sc-lbl { font-size: .78rem; color: var(--ink-soft); margin-right: 4px; }
.struct-ctl button { font: inherit; font-size: .85rem; font-weight: 700; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.struct-ctl button:hover { background: #eef0f6; }
.struct-ctl button.del { color: #b21e4b; border-color: #f3c6d4; width: auto; padding: 0 12px; }
.struct-ctl button.del:hover { background: #fdeef2; }
.bpmn-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.bk-edge { fill: none; stroke: #9aa3b5; stroke-width: 1.6; }
.bk-edge.branch { stroke: #c79bab; stroke-dasharray: 5 3; }
.bk-elabel { font: 600 10px ui-sans-serif, system-ui; fill: #8a93a7; }

.bpmn-node {
  position: absolute; box-sizing: border-box; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--nc, #2563eb);
  border-radius: 9px; box-shadow: var(--shadow); padding: 6px 11px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.bpmn-node:hover { box-shadow: 0 2px 6px rgba(16,24,40,.1), 0 10px 26px rgba(16,24,40,.13); }
.bpmn-node.sel, .bpmn-gw.sel, .bpmn-ev.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.bn-tag { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #64748b; line-height: 1.1; }
.bn-title { font-weight: 700; font-size: .82rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-sub, .bn-when { font-size: .7rem; line-height: 1.15; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-when code, .bn-sub code { background: #eef0f6; padding: 0 4px; border-radius: 4px; }

.bpmn-gw { position: absolute; cursor: pointer; }
.bpmn-gw .gw-d { width: 100%; height: 100%; background: #fff1f6; border: 2px solid var(--kind-cond); box-sizing: border-box;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.bpmn-gw:hover .gw-d { background: #ffe4ee; }
.bpmn-gw .gw-x { position: absolute; inset: 0; display: grid; place-items: center; color: var(--kind-cond);
  font-weight: 700; font-size: .95rem; pointer-events: none; }

.bpmn-ev { position: absolute; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #fff; }
.bpmn-ev.start { border: 2px solid #16a34a; background: #ecfdf3; cursor: default; }
.bpmn-ev.end { border: 3px solid #94a3b8; }
.bpmn-ev.end.r-success { border-color: #16a34a; background: #eef9f1; }
.bpmn-ev.end.r-error { border-color: var(--kind-cond); background: #fdeef2; }
.bpmn-ev.end.r-accepted { border-color: var(--kind-voc); background: #fdf3e6; }
.bpmn-ev.end.hl { box-shadow: 0 0 0 3px var(--accent); }
.bpmn-ev.end.flash { animation: flashring 1.1s ease; }
.bpmn-ev .ev-label {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 10px;
  font-family: ui-monospace, monospace; font-size: .68rem; font-weight: 700; line-height: 1.12;
  color: #334155; white-space: normal; width: 152px; pointer-events: none;
}
.bpmn-ev.r-error .ev-label { color: #b21e4b; }
.bpmn-ev.r-success .ev-label { color: #15803d; }
.bpmn-ev.r-accepted .ev-label { color: #9a5b12; }

.bpmn-box { position: absolute; box-sizing: border-box; border: 2px dashed #aab2c2; border-radius: 12px; background: rgba(238,242,248,.7); }
.bpmn-box.tx { border-style: solid; border-color: #b49ae8; background: rgba(245,240,255,.7); }
.bpmn-box-label { position: absolute; top: -10px; left: 16px; background: #fbfcfe; padding: 1px 8px; border-radius: 6px;
  font-size: .7rem; font-weight: 700; color: #5b6478; white-space: nowrap; }
.bpmn-box.tx .bpmn-box-label { color: #6d3fb8; }

@media (max-width: 880px) {
  .ex-main { grid-template-columns: 1fr; }
  .ex-aside { position: static; max-height: none; }
  .bpmn-scroll { max-height: none; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.chips code {
  background: #0d1117; color: #a5d6ff; border: 1px solid #1f2533;
  padding: 5px 11px; border-radius: 8px; font-size: .86rem; font-weight: 600;
}
.chips.fn code { color: #d2a8ff; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .sidebar .sidebar-inner { columns: 2; }
  .pair { grid-template-columns: 1fr; }
  .nav-links { gap: 14px; }
  .nav-links a:not(.cta) { display: none; }
}
@media (max-width: 560px) {
  .sidebar .sidebar-inner { columns: 1; }
  .hero { padding: 60px 0 48px; }
  section { padding: 44px 0; }
}