:root {
  --bg: #09090b;
  --panel: #101013;
  --panel2: #17171b;
  --line: #222227;
  --line2: #2f2f36;
  --text: #ededf0;
  --muted: #a3a3ad;
  --faint: #70707a;
  --accent: #f5b73d;
  --accent-ink: #1b1303;
  --pessoa: #f5b73d;
  --pessoa-bg: rgba(245, 183, 61, 0.11);
  --agente: #82acff;
  --agente-bg: rgba(130, 172, 255, 0.11);
  --freio: #4fdc8b;
  --freio-bg: rgba(79, 220, 139, 0.1);
  --bad: #f87171;
  --bad-bg: rgba(248, 113, 113, 0.1);
  --doc: #8d8d98;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --head: 'Outfit', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --top: 56px;
  --side: 268px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 20px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 15.5px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
code, kbd { font-family: var(--mono); font-size: 0.86em; }
code { background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: #dcdce2; }
kbd { color: var(--faint); border: 1px solid var(--line2); border-radius: 5px; padding: 1px 6px; font-size: 11px; }
::selection { background: rgba(245, 183, 61, 0.3); }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; letter-spacing: -0.01em; margin: 0; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 22px; padding: 0 20px; background: rgba(9, 9, 11, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.v4logo { display: block; width: 100px; height: 26px; object-fit: contain; }
.brandname { border-left: 1px solid var(--line2); padding-left: 12px; }
.brandmark svg { stroke-width: 2.3; }
.brandname { font: 600 17px var(--head); }
.brandsub { font: 11px var(--mono); color: var(--faint); padding-top: 3px; }
.toplinks { display: flex; gap: 18px; margin-left: 8px; }
.toplinks a { color: var(--muted); font-size: 14px; }
.toplinks a:hover { color: var(--text); text-decoration: none; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.searchbtn { display: flex; align-items: center; gap: 8px; color: var(--muted); border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 6px 10px; font-size: 13.5px; }
.searchbtn:hover { border-color: var(--line2); color: var(--text); }
.cta { background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 13.5px; border-radius: 9px; padding: 7px 13px; }
.cta:hover { text-decoration: none; filter: brightness(1.08); }
.iconbtn { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.menubtn { display: none; }

/* ── Shell and sidebar ───────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); }
.sidebar { position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto; border-right: 1px solid var(--line); padding: 18px 12px 40px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.navlabel { font: 500 11.5px var(--mono); color: var(--faint); padding: 14px 10px 6px; }
.navlabel:first-child { padding-top: 2px; }
.navitem, .navgroup, .navskill { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; color: var(--muted); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.navitem:hover, .navgroup:hover, .navskill:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.navitem.active, .navskill.active { color: var(--text); background: var(--panel2); font-weight: 500; }
.navitem svg { flex: none; color: var(--faint); }
.navitem.active svg { color: var(--accent); }
.navsub { padding-left: 10px; }
.navnum { font: 11px var(--mono); color: var(--faint); min-width: 16px; }
.navgroup .chev { margin-left: auto; color: var(--faint); transition: transform 0.15s; }
.navgroup.open { color: var(--text); }
.navgroup.open .chev { transform: rotate(90deg); }
.navskill { font: 13px var(--mono); padding: 5px 10px 5px 22px; }
.navskill .navnum { font-size: 10.5px; min-width: 22px; }
.ext { margin-left: auto; color: var(--faint); font-size: 12px; }

/* ── Page scaffolding ────────────────────────────────────── */
.page { padding: 44px clamp(20px, 4vw, 56px) 100px; max-width: 1180px; }
.eyebrow { font: 500 12px var(--mono); color: var(--faint); margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.eyebrow b { color: var(--text); font-weight: 600; border: 1px solid var(--line2); border-radius: 6px; padding: 1px 7px; }
h1.title { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.025em; }
.lead { font-size: 18.5px; line-height: 1.55; color: var(--muted); max-width: 62ch; margin: 16px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 3px 11px 3px 9px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.pessoa { color: var(--pessoa); background: var(--pessoa-bg); }
.chip.agente { color: var(--agente); background: var(--agente-bg); }
.chip.freio { color: var(--freio); background: var(--freio-bg); }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); background: var(--panel); border-radius: 9px; padding: 7px 13px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.btn:hover { border-color: #45454e; text-decoration: none; background: var(--panel2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn[disabled] { opacity: 0.35; cursor: default; }
.btn .mono { font: 12.5px var(--mono); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.sectiontitle { font-size: 26px; margin: 0 0 8px; }
.sectionlead { color: var(--muted); margin: 0 0 22px; max-width: 64ch; }

/* ── Map page ────────────────────────────────────────────── */
.page.wide { max-width: none; padding: 26px clamp(16px, 2.2vw, 30px) 80px; }
.maphero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 40px; margin-bottom: 18px; }
.maphero h1.title { font-size: clamp(26px, 2.6vw, 36px); }
.maphero .eyebrow { margin-bottom: 10px; }
.maphero .lead { margin: 0; font-size: 15.5px; max-width: 46ch; }
.scn { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; transition: 0.12s; }
.scn:hover { color: var(--text); border-color: var(--line2); }
.scn.active { background: var(--text); border-color: var(--text); color: #0b0b0d; font-weight: 600; }
.mapgrid { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 14px; align-items: start; }
.mapcard { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 12px; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 0); background-size: 22px 22px; }
.maptop { display: flex; align-items: center; gap: 6px 8px; margin-bottom: 2px; }
.maptop .chip { font-size: 11px; padding: 2px 9px 2px 7px; }
.maptop .say { color: var(--muted); font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maptop .say b { color: var(--text); font-weight: 600; }
.mapcontrols { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.mapcontrols .hint { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.mappanel { position: sticky; top: calc(var(--top) + 16px); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px; height: min(720px, calc(100svh - var(--top) - 32px)); min-height: 0; display: flex; flex-direction: column; }
.pp-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; padding-right: 6px; }
.pp-body:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.pp-head, .pp-dots, .pp-nav { flex-shrink: 0; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 11.5px var(--mono); color: var(--faint); margin-bottom: 10px; }
.pp-dots { display: flex; gap: 3px; margin-bottom: 16px; }
.pp-dots i { flex: 1; height: 3px; border-radius: 2px; background: var(--line2); }
.pp-dots i.done { background: #6b6b75; }
.pp-dots i.now { background: var(--text); }
.pp-title { font-size: 24px; margin: 12px 0 8px; }
.pp-line { color: var(--text); font-size: 15.5px; margin: 0 0 12px; }
.pp-points { margin: 0 0 14px; padding-left: 18px; color: var(--muted); font-size: 14.5px; }
.pp-points li { margin: 5px 0; }
.callout { border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 14px; display: flex; gap: 9px; }
.callout.person { background: var(--pessoa-bg); color: #f8cf7a; }
.callout.person::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pessoa); margin-top: 7px; }
.callout.info { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tagchip { font: 12px var(--mono); color: var(--muted); border: 1px dashed var(--line2); border-radius: 7px; padding: 3px 8px; }
.pp-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.pp-nav { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.routechoices + .pp-nav { margin-top: 5px; }
.pp-nav .btn { flex: 1; justify-content: center; }
.pp-resume { margin-bottom: 12px; }
.chip.routing { color: var(--pessoa); border: 1px dashed rgba(245, 183, 61, 0.5); background: transparent; }
.chip.routing::before { border-radius: 1px; transform: rotate(45deg); background: var(--pessoa); }
.fnode.k-routing .box { fill: #201a0f; stroke: var(--pessoa); stroke-width: 1.3; stroke-dasharray: 4 3; }
.fnode.k-routing .bar { fill: var(--pessoa); }
svg.flow.interactive .fnode.k-routing.off { opacity: 1; }
svg.flow.interactive .fnode.k-routing.current .box { stroke-dasharray: none; }
.mapcontrols { flex-wrap: wrap; }
.mapcontrols #mreset { margin-left: auto; font-size: 12px; }
.mapcontrols .hint { flex-basis: 100%; margin-left: 0; }
#mapsvg { overflow-x: auto; scroll-behavior: smooth; }
/* The shortcuts: each one keeps its colour, on the line, in the legend and on the button that takes it. */
.sc-small { --sc: #35d0e6; }
.sc-how { --sc: #c79bff; }
.sc-resume { --sc: #b9b9c6; }
.chip.shortcut { color: var(--sc); background: transparent; border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); }
.chip.shortcut::before { width: 14px; height: 2px; border-radius: 1px; }
.fedge.shortcut { color: var(--sc); }
.fedge.shortcut .line { stroke-width: 1.8; }
.elabel.note { fill: currentColor; font-weight: 500; }
svg.flow.interactive .fedge.shortcut.offp { opacity: 0.9; }
svg.flow.interactive .fedge.shortcut.on { color: color-mix(in srgb, var(--sc) 70%, #fff); }
svg.flow.interactive .fedge.shortcut.on .line { stroke-width: 2.2; }
svg.flow.interactive .fedge.shortcut .elabel, svg.flow.interactive .fedge.fork .elabel { opacity: 1; }
svg.flow.interactive .fedge.fork .elabel:not(.note) { fill: var(--text); }
svg.flow.interactive .fnode.skipped { opacity: 0.26; }
.routechoices .btn.choice.going { border-color: var(--text); background: var(--panel2); }
.routechoices .btn.choice[class*="sc-"] { border-color: color-mix(in srgb, var(--sc) 55%, transparent); color: var(--sc); }
.routechoices .btn.choice[class*="sc-"].going { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); }
.maptop .say[data-route="bug"] b { color: #35d0e6; }
.maptop .say[data-route="how"] b { color: #c79bff; }
.below { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 28px; }
.tilecard { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; color: var(--text); transition: 0.12s; }
.tilecard:hover { border-color: var(--line2); text-decoration: none; transform: translateY(-1px); }
.tilecard h3 { font-size: 16.5px; margin-bottom: 4px; }
.tilecard p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.tilecard .go { color: var(--accent); font-size: 13px; margin-top: 10px; display: block; }

/* ── Flow diagrams (SVG) ─────────────────────────────────── */
svg.flow { display: block; width: 100%; height: auto; overflow: visible; margin: 0 auto; }
.fedge { color: #4a4a54; }
.fedge .line { stroke: currentColor; stroke-width: 1.5; fill: none; }
.fedge .head { fill: currentColor; stroke: none; }
.fedge.dashed .line { stroke-dasharray: 4 5; }
.fedge.jump { display: none; }
.fedge.jump.on { display: block; }
.elabel { font: 500 10.5px var(--mono); fill: var(--muted); stroke: var(--panel); stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
.fnode .box { fill: #15151a; stroke: var(--line2); stroke-width: 1; }
.fnode .bar { stroke: none; fill: var(--doc); }
.fnode .fn { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 1px; font-family: var(--sans); line-height: 1.22; }
.fnode .fn b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.fnode .fn span { font-size: 11px; color: var(--muted); }
.fnode.k-pessoa .box { fill: #1b170e; stroke: rgba(245, 183, 61, 0.42); }
.fnode.k-pessoa .bar { fill: var(--pessoa); }
.fnode.k-agente .box { fill: #11151d; stroke: rgba(130, 172, 255, 0.36); }
.fnode.k-agente .bar { fill: var(--agente); }
.fnode.k-freio .box { fill: #0f1814; stroke: rgba(79, 220, 139, 0.36); }
.fnode.k-freio .bar { fill: var(--freio); }
.fnode.k-bad .box { fill: #1c1213; stroke: rgba(248, 113, 113, 0.4); }
.fnode.k-bad .bar { fill: var(--bad); }
.fnode.k-doc .box { stroke-dasharray: 4 4; }
.fnode.opt .box { stroke-dasharray: 5 4; }
.fnode.k-plain .box { fill: #141418; }
.pbadge rect { fill: var(--pessoa); stroke: none; }
.pbadge text { font: 600 8.5px var(--mono); fill: var(--accent-ink); stroke: none; }
.ftag { font: 9.5px var(--mono); fill: var(--faint); stroke: none; }
.band { font: 500 10.5px var(--mono); fill: var(--faint); stroke: none; letter-spacing: 0.04em; }
.collabel { font: 500 10.5px var(--mono); fill: var(--faint); stroke: none; }

svg.flow.interactive { max-width: 860px; }
svg.flow.interactive .fnode { cursor: pointer; transition: opacity 0.35s; }
svg.flow.interactive .fnode:hover .box { stroke: #8a8a96; }
svg.flow.interactive .fnode .fn b { font-size: 15px; letter-spacing: -0.01em; }
svg.flow.interactive .ftag { font-size: 11px; }
svg.flow.interactive .elabel { font-size: 12px; }
svg.flow.interactive .band { font-size: 11.5px; }
svg.flow.interactive .pbadge text { font-size: 9.5px; }
svg.flow.interactive .fnode.off { opacity: 0.58; }
svg.flow.interactive .fnode.off:hover { opacity: 0.85; }
svg.flow.interactive .fnode.sel { opacity: 1; }
svg.flow.interactive .fnode.current .box { stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.28)); }
svg.flow.interactive .fnode.sel .box { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 5 4; }
svg.flow.interactive .fedge { transition: color 0.35s, opacity 0.35s; }
svg.flow.interactive .fedge.offp { opacity: 0.6; }
svg.flow.interactive .fedge.on { color: #e9e9ee; }
svg.flow.interactive .fedge.on .line { stroke-width: 1.8; stroke-dasharray: 5 6; animation: dash 0.9s linear infinite; }
svg.flow.interactive .fedge.offp .elabel, svg.flow.interactive .ftag.offp { opacity: 0.4; }
@keyframes dash { to { stroke-dashoffset: -22; } }

/* ── Skill and guide articles ────────────────────────────── */
.skillhead { border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 8px; }
.skillhead h1 { display: flex; align-items: center; gap: 16px; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.skillhead .lead { margin-top: 12px; }
.tile { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 6px 22px -6px var(--glow, transparent); }
.tile svg { width: 24px; height: 24px; stroke-width: 1.9; }
.tile.sm { width: 34px; height: 34px; border-radius: 9px; }
.tile.sm svg { width: 18px; height: 18px; }
.tile.g-comecar { background: linear-gradient(135deg, #f7b733, #f0612d); --glow: rgba(247, 150, 51, 0.6); }
.tile.g-fluxo { background: linear-gradient(135deg, #f472b6, #8b5cf6); --glow: rgba(190, 100, 230, 0.55); }
.tile.g-desvios { background: linear-gradient(135deg, #38bdf8, #4f46e5); --glow: rgba(70, 130, 240, 0.55); }
.tile.g-agentes { background: linear-gradient(135deg, #34d399, #0d9488); --glow: rgba(40, 190, 150, 0.5); }
.headrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.headrow .sp { margin-left: auto; }
.cmdwrap { margin-top: 26px; }
.minilabel { font: 500 11.5px var(--mono); color: var(--faint); margin-bottom: 8px; }
.cmd { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px 11px 16px; font: 13.5px var(--mono); }
.cmd .dollar { color: var(--faint); user-select: none; }
.cmd .text { white-space: nowrap; color: var(--text); margin-right: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.copy { flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: rgba(245, 183, 61, 0.14); color: var(--accent); }
.copy:hover { background: rgba(245, 183, 61, 0.24); }
.copy.ok { color: var(--freio); background: var(--freio-bg); }
.callnote { color: var(--muted); font-size: 13.5px; margin: 9px 0 0; }
.twocol { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 48px; align-items: start; }
.article { min-width: 0; }
.article section { padding-top: 40px; }
.article h2 { font-size: 25px; margin-bottom: 14px; }
.article h3 { font-size: 17px; margin: 22px 0 8px; }
.article p { margin: 0 0 14px; max-width: 70ch; }
.article p.sub { color: var(--muted); }
.article ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; max-width: 72ch; }
.article ol.steps li { counter-increment: s; position: relative; padding: 0 0 12px 38px; }
.article ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line2); display: grid; place-items: center; font: 500 11.5px var(--mono); color: var(--muted); }
ul.checks { margin: 0; padding: 0; list-style: none; max-width: 72ch; }
ul.checks li { position: relative; padding: 0 0 9px 30px; }
ul.checks li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--freio-bg); border: 1px solid rgba(79, 220, 139, 0.5); }
ul.checks li::after { content: ''; position: absolute; left: 7px; top: 8.5px; width: 4px; height: 7px; border: solid var(--freio); border-width: 0 1.6px 1.6px 0; transform: rotate(42deg); }
ul.plain { margin: 0; padding-left: 20px; max-width: 72ch; }
ul.plain li { margin: 5px 0; }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14.5px; background: var(--panel); }
table.t th { text-align: left; font: 600 12.5px var(--sans); color: var(--text); padding: 11px 16px; border-bottom: 1px solid var(--line); }
table.t td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: #d6d6dc; }
table.t tr:last-child td { border-bottom: 0; }
table.t td:first-child { width: 46%; }
table.t td a, .sk { font-family: var(--mono); font-size: 0.9em; }
figure.diagram { margin: 22px 0 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 14px; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0); background-size: 22px 22px; overflow-x: auto; }
figure.diagram figcaption { color: var(--muted); font-size: 13.5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rail { position: sticky; top: calc(var(--top) + 28px); padding-top: 44px; font-size: 13.5px; }
.raillabel { font: 500 11.5px var(--mono); color: var(--faint); margin: 0 0 10px; }
.toc { border-left: 1px solid var(--line); margin-bottom: 26px; }
.toc a { display: block; color: var(--muted); padding: 4px 0 4px 13px; margin-left: -1px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.active { color: var(--accent); border-left-color: var(--accent); }
.fits { list-style: none; margin: 0 0 26px; padding: 0; font: 12.5px var(--mono); }
.fits li { display: flex; align-items: center; gap: 9px; color: var(--faint); padding: 3px 0; }
.fits li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--line2); }
.fits li.active { color: var(--accent); }
.fits li.active::before { background: var(--accent); }
.fits a { color: inherit; }

/* examples */
.extag { font: 500 11.5px var(--mono); color: var(--faint); margin-bottom: 12px; }
.chat { display: grid; gap: 10px; max-width: 760px; }
.bubble { max-width: 88%; padding: 11px 15px; border-radius: 14px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; border: 1px solid transparent; }
.bubble small { display: block; font: 600 10.5px var(--mono); margin-bottom: 3px; }
.bubble.pessoa { justify-self: end; background: var(--pessoa-bg); border-color: rgba(245, 183, 61, 0.22); border-bottom-right-radius: 4px; }
.bubble.pessoa small { color: var(--pessoa); }
.bubble.agente { justify-self: start; background: var(--agente-bg); border-color: rgba(130, 172, 255, 0.2); border-bottom-left-radius: 4px; }
.bubble.agente small { color: var(--agente); }
.termwrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0c0c0f; }
.termbar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.termbar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
pre.term { margin: 0; padding: 14px 16px; font: 12.8px/1.65 var(--mono); color: #d7d7de; overflow-x: auto; }
pre.term .ok { color: var(--freio); } pre.term .no { color: var(--bad); } pre.term .dim { color: var(--faint); } pre.term .cmdl { color: #fff; }
.doc { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); max-width: 820px; }
.doc header { padding: 11px 16px; font: 600 14px var(--sans); border-bottom: 1px solid var(--line); background: var(--panel2); display: flex; gap: 10px; align-items: center; }
.doc header::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); }
.doc p { margin: 0; max-width: none; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: #d6d6dc; }
.doc p:last-child { border-bottom: 0; }
.faq details { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); margin-bottom: 8px; max-width: 820px; }
.faq summary { cursor: pointer; list-style: none; padding: 13px 44px 13px 16px; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 16px; top: 9px; font: 400 20px var(--mono); color: var(--faint); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0; padding: 0 16px 14px; color: var(--muted); max-width: none; }
.source { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.sourcetabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); padding: 0 8px; }
.sourcetab { font: 12.5px var(--mono); color: var(--faint); padding: 11px 10px 9px; border-bottom: 2px solid transparent; white-space: nowrap; }
.sourcetab.active { color: var(--text); border-bottom-color: var(--accent); }
.sourcepath { font: 11.5px var(--mono); color: var(--faint); padding: 10px 20px 0; }
.md { padding: 4px 20px 20px; font-size: 14.5px; max-height: 520px; overflow-y: auto; }
.md.open { max-height: none; }
.md h1 { font-size: 20px; margin: 16px 0 8px; } .md h2 { font-size: 17px; margin: 22px 0 8px; } .md h3 { font-size: 15px; margin: 18px 0 6px; }
.md p, .md li { color: #d0d0d7; max-width: none; }
.md pre { background: #0c0c0f; border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; font-size: 12.5px; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 13.5px; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.md blockquote { border-left: 2px solid var(--line2); margin: 0; padding-left: 14px; color: var(--muted); }
.md a { pointer-events: none; color: inherit; }
.sourcefoot { border-top: 1px solid var(--line); padding: 8px 12px; display: flex; justify-content: center; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; }
.pager a { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 14px 16px; color: var(--text); }
.pager a:hover { border-color: var(--line2); text-decoration: none; }
.pager small { display: block; font: 11.5px var(--mono); color: var(--faint); margin-bottom: 3px; }
.pager .next { text-align: right; grid-column: 2; }
.pager b { font: 500 14px var(--mono); }

/* custom diagrams */
.cut { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cut-panel { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #0d0d10; }
.cut-panel h4 { font: 600 13.5px var(--sans); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cut-panel.bad h4 { color: var(--bad); } .cut-panel.good h4 { color: var(--freio); }
.cut-repos { display: grid; gap: 6px; font: 11px var(--mono); color: var(--faint); margin-bottom: 6px; }
.cut-row { display: grid; gap: 6px; margin-bottom: 6px; align-items: stretch; }
.cut-cell { min-height: 30px; border-radius: 7px; border: 1px dashed var(--line2); }
.cut-cell.fill { border: 1px solid rgba(130, 172, 255, 0.4); background: var(--agente-bg); }
.cut-cell.fill.bad { border-color: rgba(248, 113, 113, 0.4); background: var(--bad-bg); min-height: 132px; display: grid; place-items: center; color: #f3b0b0; font-size: 12.5px; text-align: center; padding: 6px; }
.cut-name { font-size: 12.5px; color: #d6d6dc; display: flex; align-items: center; line-height: 1.3; }
.cut-note { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
.lanes { display: grid; gap: 6px 0; font-size: 12.5px; min-width: 520px; }
.lane { display: contents; }
.lane-label { font: 12px var(--mono); color: var(--muted); display: flex; align-items: center; padding-right: 12px; }
.lane-track { position: relative; height: 30px; border-radius: 7px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--cols) - 1px), var(--line) calc(100% / var(--cols) - 1px) calc(100% / var(--cols))); }
.lane-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; display: flex; align-items: center; padding: 0 9px; font: 500 11.5px var(--sans); white-space: nowrap; overflow: hidden; border: 1px solid transparent; }
.lane-bar.k-agente { background: var(--agente-bg); border-color: rgba(130, 172, 255, 0.4); color: #b9d0ff; }
.lane-bar.k-pessoa { background: var(--pessoa-bg); border-color: rgba(245, 183, 61, 0.45); color: #f8cf7a; }
.lane-bar.k-doc { border: 1px dashed var(--line2); color: var(--muted); }
.lanes-axis { grid-column: 2; display: flex; justify-content: space-between; font: 10.5px var(--mono); color: var(--faint); padding-top: 4px; }
.danger { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.door { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #0d0d10; }
.door h4 { font-size: 15.5px; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.door .arrows { font: 600 15px var(--mono); }
.door.two .arrows { color: var(--freio); } .door.one .arrows { color: var(--bad); }
.door p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; max-width: none; }
.door ul { margin: 0; padding-left: 18px; color: #d0d0d7; font-size: 13.5px; }
.radius { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #0d0d10; }
.radius h4 { font-size: 14px; margin-bottom: 10px; }
.radius-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.radius-scale span { text-align: center; font: 12px var(--mono); padding: 7px 4px; border-radius: 7px; color: #f0c9c9; }
.ladder { display: grid; gap: 8px; }
.rung { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.rung .n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 600 13px var(--mono); background: var(--freio-bg); color: var(--freio); }
.rung.last .n { background: var(--pessoa-bg); color: var(--pessoa); }
.rung h3 { font-size: 16px; margin: 0 0 2px; }
.rung p { margin: 0; color: var(--muted); font-size: 14px; }
.rung .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 11.5px var(--mono); color: var(--faint); margin-top: 6px; }
.costbar { height: 4px; border-radius: 2px; background: var(--line); margin-top: 10px; overflow: hidden; }
.costbar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--freio), var(--pessoa)); }

/* ── Skills overview ─────────────────────────────────────── */
.hero2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.stats { display: flex; gap: 30px; margin-top: 28px; }
.stats b { display: block; font: 600 30px var(--mono); letter-spacing: -0.02em; }
.stats span { font: 11px var(--mono); color: var(--faint); }
.install h3 { font-size: 16.5px; margin-bottom: 4px; }
.install p { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.install .cmd { margin-bottom: 6px; }
.install .blk { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.install .blk:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.grp { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--line); }
.grp:last-child { border-bottom: 0; }
.grp h3 { font-size: 21px; display: flex; align-items: baseline; gap: 10px; }
.grp h3 small { font: 11.5px var(--mono); color: var(--faint); }
.grp .desc { color: var(--muted); margin: 6px 0 10px; font-size: 14.5px; }
.grp .start { font: 12.5px var(--mono); color: var(--faint); }
.grp .start a { color: var(--text); border-bottom: 1px solid var(--line2); }
.row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 16px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--line); color: var(--text); }
.row:last-child { border-bottom: 0; }
.row:hover { text-decoration: none; }
.row:hover .rowtitle { color: var(--accent); }
.row .slash { font: 11.5px var(--mono); color: var(--faint); }
.row .rowtitle { font: 500 16px var(--head); margin: 1px 0 2px; transition: color 0.12s; }
.row .rowdesc { color: var(--muted); font-size: 14px; }
.row .arrow { color: var(--faint); }

/* ── Guides ──────────────────────────────────────────────── */
.timeline { position: relative; margin-top: 30px; }
.tl-item { position: relative; padding: 0 0 38px 54px; max-width: 900px; }
.tl-item::before { content: ''; position: absolute; left: 16px; top: 36px; bottom: 0; width: 1px; background: var(--line2); }
.tl-item:last-child::before { display: none; }
.tl-num { position: absolute; left: 0; top: 0; }
.tl-item h3 { font-size: 20px; margin-bottom: 2px; }
.tl-item h3 a { color: var(--text); }
.tl-item .tl-sub { color: var(--muted); margin: 0 0 14px; font-size: 14.5px; }
.decide { display: grid; gap: 8px; }
.dcard { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); font-size: 14px; }
.dcard > * { padding: 12px 16px; }
.dcard .stage { font: 600 14.5px var(--head); display: flex; align-items: center; border-right: 1px solid var(--line); }
.dcard .p { background: var(--pessoa-bg); color: #f8d58d; border-right: 1px solid var(--line); }
.dcard .a { color: #c6d8ff; background: var(--agente-bg); }
.dhead { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr); font: 500 11.5px var(--mono); color: var(--faint); padding: 0 0 6px; }
.dhead span { padding: 0 16px; }
.adr { border: 1px solid var(--line); border-radius: 13px; background: var(--panel); margin-bottom: 10px; }
.adr summary { cursor: pointer; list-style: none; padding: 16px 18px; }
.adr summary::-webkit-details-marker { display: none; }
.adr h3 { font-size: 17px; margin-bottom: 4px; }
.adr summary p { margin: 0; color: var(--muted); font-size: 14.5px; }
.adr summary .more { color: var(--accent); font-size: 13px; display: inline-block; margin-top: 8px; }
.adr[open] summary .more { display: none; }
.adr .md { max-height: none; border-top: 1px solid var(--line); padding-top: 6px; }
.filter { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--text); font: 14.5px var(--sans); margin: 22px 0 6px; outline: none; }
.filter:focus { border-color: var(--accent); }
.glossgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.term { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px 16px; scroll-margin-top: 90px; }
.term h4 { font-size: 16px; margin-bottom: 4px; }
.term p { margin: 0; color: var(--muted); font-size: 14px; }
.term .avoid { margin-top: 8px; font: 11.5px var(--mono); color: var(--faint); }
.term.hit { border-color: var(--accent); }

/* ── Search ──────────────────────────────────────────────── */
.searchwrap { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px); display: grid; justify-items: center; align-content: start; padding: 12vh 16px 0; }
.searchwrap[hidden] { display: none; }
.searchbox { width: min(620px, 100%); background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px -20px #000; }
.searchinput { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--faint); }
.searchinput input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font: 15.5px var(--sans); }
.searchresults { max-height: 52vh; overflow-y: auto; padding: 6px; }
.sr { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 10px; border-radius: 9px; color: var(--text); }
.sr:hover, .sr.active { background: var(--panel2); text-decoration: none; }
.sr-kind { font: 10.5px var(--mono); color: var(--faint); }
.sr b { font-weight: 500; font-size: 14.5px; }
.sr span { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-empty { padding: 18px; color: var(--muted); font-size: 14px; }
.scrim { display: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .mapgrid { grid-template-columns: minmax(0, 1fr); }
  .mappanel { position: static; min-height: 0; }
  .twocol { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .menubtn { display: grid; }
  .toplinks, .brandsub, .searchbtn kbd, .searchbtn span { display: none; }
  .sidebar { position: fixed; left: 0; top: var(--top); bottom: 0; width: min(300px, 86vw); z-index: 40; background: var(--bg); transform: translateX(-102%); transition: transform 0.18s; }
  body.menu .sidebar { transform: none; }
  body.menu .scrim { display: block; position: fixed; inset: var(--top) 0 0 0; z-index: 35; background: rgba(0, 0, 0, 0.6); }
  .hero2, .grp { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cut, .danger { grid-template-columns: minmax(0, 1fr); }
  .dcard, .dhead { grid-template-columns: minmax(0, 1fr); }
  .dcard .stage, .dcard .p { border-right: 0; border-bottom: 1px solid var(--line); }
  .dhead { display: none; }
  .bubble { max-width: 100%; }
  #mapsvg { overflow-x: auto; scroll-behavior: smooth; }
  .mapcontrols .hint { display: none; }
  .mapcontrols .btn { white-space: nowrap; }
  .mapcard svg.flow { min-width: 760px; }
  figure.diagram svg.flow { min-width: 560px; }
}

/* ── Questions page ──────────────────────────────────────── */
.qa { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: 56px; align-items: start; }
.qa-side { position: sticky; top: calc(var(--top) + 44px); }
.qa-side h1.title { font-size: clamp(30px, 3.4vw, 44px); }
.qa-side .lead { font-size: 15.5px; }
.askbox { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line2); padding: 6px 0 12px; transition: border-color 0.15s; }
.askbox:focus-within { border-bottom-color: var(--accent); }
.askbox input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 17px var(--sans); padding: 6px 0; }
.askbox input::placeholder { color: var(--faint); }
.askbox button { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); transition: 0.12s; }
.askbox button:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.askhint { color: var(--faint); font-size: 12.5px; margin: 9px 0 0; }
.ask-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.ask-q { font: 600 17px var(--head); margin-bottom: 10px; }
.ask-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.ask-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }
.ask-text { color: #dedee3; font-size: 15.5px; max-width: 68ch; }
.ask-text p { margin: 0 0 10px; }
.ask-text ul, .ask-text ol { margin: 0 0 10px; padding-left: 20px; }
.ask-text li { margin: 3px 0; }
.cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin: 0 1px; border-radius: 5px; background: var(--pessoa-bg); color: var(--accent); font: 600 10.5px var(--mono); vertical-align: 2px; }
.cite:hover { text-decoration: none; background: var(--accent); color: var(--accent-ink); }
.ask-note { color: var(--muted); font-size: 14.5px; margin: 0 0 12px; }
.ask-note.err { color: var(--bad); }
.passage { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: 12px 14px; margin-bottom: 8px; }
.passage a { font: 500 13px var(--mono); }
.passage p { margin: 6px 0 0; color: #cfcfd6; font-size: 14.5px; }
.srcs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.srcs > span { font: 500 11.5px var(--mono); color: var(--faint); margin-right: 4px; }
.srcchip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px 3px 4px; color: var(--muted); font-size: 12.5px; max-width: 100%; }
.srcchip:hover { color: var(--text); border-color: var(--line2); text-decoration: none; }
.srcchip b { flex: none; display: grid; place-items: center; min-width: 17px; height: 17px; border-radius: 5px; background: var(--pessoa-bg); color: var(--accent); font: 600 10.5px var(--mono); }
.ask-mode { color: var(--faint); font-size: 12px; margin-top: 10px; }
.qa-group { font: 500 11.5px var(--mono); color: var(--faint); margin: 40px 0 4px; }
.qrow { border-bottom: 1px solid var(--line); }
.qrow summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px; padding: 15px 0; font-size: 15.5px; }
.qrow summary::-webkit-details-marker { display: none; }
.qrow summary:hover { color: #fff; }
.qrow .chev { margin-left: auto; color: var(--faint); transition: transform 0.15s; flex: none; }
.qrow[open] .chev { transform: rotate(90deg); }
.qrow p { margin: 0; padding: 0 28px 18px 0; color: var(--muted); max-width: 70ch; }
.sr.ask-row .sr-kind { color: var(--accent); }
@media (max-width: 900px) { .qa { grid-template-columns: minmax(0, 1fr); gap: 24px; } .qa-side { position: static; } }

/* Public introduction */
.mapcard { scroll-margin-top: 74px; }
.home { max-width: 1160px; margin: auto; padding: 72px 32px 24px; }
.homehero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 72px; align-items: center; padding-bottom: 64px; }
.homehero h1 { font-size: clamp(42px, 4.8vw, 66px); line-height: 1.07; letter-spacing: -.035em; margin: 20px 0 24px; }
.homehero h1 span { color: #ff554f; }
.homelead { color: #b8b8c0; font-size: 18px; line-height: 1.7; max-width: 48ch; }
.homeactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.homeactions .btn { padding: 10px 16px; }
.homeactions .primary { background: #e53535; border-color: #e53535; color: white; }
.homenote { font-size: 12px; color: var(--muted); margin-top: 16px; }
.homepreview { padding: 26px 28px; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel); }
.homepreview ol { list-style: none; padding: 0; margin: 22px 0; }
.homepreview li { display: flex; gap: 16px; position: relative; padding: 0 0 28px; }
.homepreview li:last-child { padding-bottom: 0; }
.homepreview li:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 34px; bottom: 3px; width: 1px; background: var(--line2); }
.homepreview li > span { font: 12px var(--mono); color: #ff817c; border: 1px solid #673632; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.homepreview h3 { font-size: 18px; }
.homepreview p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.homepreview > a { display: block; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.homeintro { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; border-top: 1px solid var(--line); padding: 44px 0; }
.home h2 { font-size: 30px; line-height: 1.25; }
.homeintro p { margin: 0 0 14px; color: var(--muted); }
.homepaths { padding: 36px 0 52px; }
.homepaths h2 { margin-bottom: 24px; }
.homepaths > a { display: flex; align-items: center; gap: 24px; padding: 22px 8px; border-top: 1px solid var(--line); color: var(--text); }
.homepaths > a:last-child { border-bottom: 1px solid var(--line); }
.homepaths > a:hover { text-decoration: none; background: var(--panel); }
.pathnum { font: 12px var(--mono); color: var(--faint); }
.homepaths h3 { font-size: 19px; }
.homepaths p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.homepaths > a > span:last-child { margin-left: auto; white-space: nowrap; font-size: 13px; color: #ff817c; }
.homeorigin { border-left: 2px solid #e53535; padding: 8px 28px; max-width: 800px; margin-bottom: 44px; }
.homeorigin p { color: var(--muted); }
.credits { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px; font-size: 12px; color: var(--muted); }
.credits a { color: #c2c2cc; margin-right: 8px; }
.maptop { align-items: flex-start; justify-content: space-between; gap: 16px; }
.maptop .say { white-space: normal; }
.maptop > .btn { flex: none; font-size: 12px; }
.maplegend { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.routechoices { flex-shrink: 0; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.routechoices p { margin: 0 0 10px; font-size: 13px; }
.routechoices .btn { display: flex; width: 100%; justify-content: space-between; margin-bottom: 7px; text-align: left; font-size: 12px; }
.mapcontrols { flex-wrap: wrap; }
.mappanel { border-radius: 10px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 900px) {
  .home { padding-top: 40px; }
  .homehero { gap: 30px; }
  .homeintro { gap: 30px; }
}
@media (max-width: 650px) {
  .home { padding: 32px 20px 24px; }
  .homehero, .homeintro { grid-template-columns: 1fr; gap: 26px; }
  .homehero { padding-bottom: 36px; }
  .homehero h1 { font-size: 44px; }
  .homelead { font-size: 16px; }
  .home h2 { font-size: 26px; }
  .homepaths > a { gap: 14px; }
  .homepaths > a > span:last-child { font-size: 0; }
  .homepaths > a > span:last-child::after { content: '→'; font-size: 18px; }
  .homeorigin { padding-left: 18px; }
  .v4logo { width: 76px; height: 22px; }
  .brand { gap: 8px; }
  .brandname { font-size: 14px; padding-left: 8px; }
  .maptop { flex-wrap: wrap; gap: 10px; }
  .maptop .say { flex-basis: 100%; }
  .topbar { gap: 10px; padding: 0 12px; }
  .topright { gap: 8px; }
}

/* ── Top bar: language and repository ────────────────────── */
.langs { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--panel); }
.langs button { font: 600 12px var(--mono); color: var(--faint); padding: 6px 9px; }
.langs button:hover { color: var(--text); }
.langs button.on { background: var(--text); color: #0b0b0d; }
.ghbtn { display: flex; align-items: center; gap: 7px; color: var(--muted); border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 6px 10px; font-size: 13.5px; }
.ghbtn:hover { color: var(--text); border-color: var(--line2); text-decoration: none; }
.cta { background: #e53535; color: #fff; }

/* ── Map: phases and gates ───────────────────────────────── */
.fphase rect { stroke-width: 1; }
.fphase.p-plan rect { fill: rgba(245, 183, 61, 0.035); stroke: rgba(245, 183, 61, 0.2); }
.fphase.p-hard rect { fill: rgba(255, 85, 79, 0.03); stroke: rgba(255, 85, 79, 0.2); }
.fphase text { stroke: none; font: 600 11px var(--mono); letter-spacing: 0.05em; }
.fphase.p-plan .pl { fill: var(--pessoa); }
.fphase.p-hard .pl { fill: #ff817c; }
.fphase .pm { fill: var(--faint); font-weight: 400; letter-spacing: 0; }
.fnode.k-gate .box { fill: #1b170e; stroke: var(--pessoa); stroke-width: 1.3; }
.fnode.k-gate .glabel { font: 700 8.5px var(--mono); fill: var(--pessoa); stroke: none; pointer-events: none; }
svg.flow.interactive .fnode.k-gate.current .box { fill: var(--pessoa); stroke: #fff; }
svg.flow.interactive .fnode.k-gate.current .glabel { fill: var(--accent-ink); }
.chip.gate { color: var(--pessoa); background: transparent; border: 1px solid rgba(245, 183, 61, 0.5); }
.chip.gate::before { border-radius: 1px; transform: rotate(45deg); }
.gatenum { display: inline-block; font: 700 13px var(--mono); color: var(--accent-ink); background: var(--pessoa); border-radius: 6px; padding: 1px 7px; margin-right: 10px; vertical-align: 3px; }
.pp-k { font: 500 11.5px var(--mono); color: var(--faint); margin-right: 4px; }
.pp-sub { font: 500 11.5px var(--mono); color: var(--faint); margin: 4px 0 8px; }
.mappanel ul.checks { font-size: 14px; margin-bottom: 10px; }
.mappanel ul.checks li { padding-bottom: 6px; }
.routechoices .btn[disabled] { opacity: 0.6; }
.routechoices .btn.exit-yes { border-color: rgba(79, 220, 139, 0.45); }
.routechoices .btn.exit-adjust { border-color: rgba(245, 183, 61, 0.45); }
.routechoices .btn.exit-no { border-color: rgba(248, 113, 113, 0.45); }
.mapnote { color: var(--faint); font-size: 12.5px; margin: 14px 2px 0; }
svg.flow.interactive { max-width: 1010px; }

/* ── Home: try it, phases, open source ───────────────────── */
.home h2 { margin-bottom: 10px; }
.tryit { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px 56px; align-items: start; border-top: 1px solid var(--line); padding: 52px 0; scroll-margin-top: 70px; }
.tryhead p { color: var(--muted); margin: 0 0 16px; }
.tryafter { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.tryafter li { counter-increment: t; position: relative; padding: 0 0 9px 34px; color: #d6d6dc; font-size: 14.5px; }
.tryafter li::before { content: counter(t); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line2); display: grid; place-items: center; font: 500 11px var(--mono); color: var(--muted); }
.trybox { border: 1px solid #5a2a28; border-radius: 14px; background: #0c0c0f; overflow: hidden; box-shadow: 0 24px 70px -30px rgba(229, 53, 53, 0.45); }
.trybar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.trybar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.trybar .btn { margin-left: auto; }
.trybar .btn.primary, .askok .btn.primary, .install .btn.primary { background: #e53535; border-color: #e53535; color: #fff; }
.btn.ok { background: var(--freio) !important; border-color: var(--freio) !important; color: #06160d !important; }
.tryprompt { margin: 0; padding: 18px 20px; font: 14px/1.7 var(--mono); color: #ececf1; white-space: pre-wrap; word-break: break-word; }
.trynote { margin: 0; padding: 11px 20px 13px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; }
.trymanual { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.trymanual summary { cursor: pointer; list-style: none; padding: 13px 18px; color: var(--muted); font-size: 14px; }
.trymanual summary::-webkit-details-marker { display: none; }
.trymanual summary::after { content: '+'; float: right; font: 400 18px var(--mono); color: var(--faint); }
.trymanual[open] summary::after { content: '–'; }
.manualgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 4px 18px 18px; }
.manualgrid h3 { font-size: 15.5px; margin-bottom: 4px; }
.manualgrid p { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.manualgrid .cmd { margin-bottom: 6px; }
.homephases { border-top: 1px solid var(--line); padding: 48px 0; }
.homephases .sectionlead { max-width: 70ch; }
.phasecards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); gap: 14px; align-items: stretch; margin: 22px 0; }
.phasecard { border: 1px solid var(--line2); border-radius: 14px; padding: 18px 20px; background: var(--panel); }
.phasecard.p-plan { border-color: rgba(245, 183, 61, 0.35); background: linear-gradient(180deg, rgba(245, 183, 61, 0.06), transparent 60%), var(--panel); }
.phasecard.p-hard { border-color: rgba(255, 85, 79, 0.35); background: linear-gradient(180deg, rgba(255, 85, 79, 0.06), transparent 60%), var(--panel); }
.phasetag { font: 600 11.5px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.p-plan .phasetag { color: var(--pessoa); } .p-hard .phasetag { color: #ff817c; }
.phasecard h3 { font-size: 21px; margin-bottom: 12px; }
.phasecard ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; counter-reset: p; }
.phasecard li { counter-increment: p; font-size: 13.5px; border: 1px solid var(--line2); border-radius: 999px; padding: 4px 12px 4px 8px; background: #0d0d10; }
.phasecard li::before { content: counter(p); font: 600 10.5px var(--mono); color: var(--faint); margin-right: 7px; }
.phasearrow { align-self: center; color: var(--faint); font: 500 13px var(--mono); padding: 0 2px; }
.whylist { list-style: none; margin: 6px 0 20px; padding: 0; }
.whylist li { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); font: 500 16.5px var(--head); color: var(--text); }
.whylist li span { font: 11.5px var(--mono); color: #ff817c; }
.homeopen { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; margin-bottom: 44px; }
.homeopen p { margin: 0 0 14px; color: var(--muted); }
.credits { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.creditlinks a { margin: 0 0 0 14px; }
.creditlinks a:first-child { margin-left: 0; }

/* ── Manifesto ───────────────────────────────────────────── */
.manifesto { max-width: 1040px; }
.manifesto > section { padding: 56px 0 8px; border-top: 1px solid var(--line); margin-top: 48px; scroll-margin-top: 60px; }
.manifesto h2 { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 10px; }
.manifesto .sectionlead { font-size: 17px; }
.mhero h1 { font-size: clamp(44px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -0.04em; margin: 14px 0 18px; }
.mhero h1 span { color: #ff554f; }
.byline { font: 12.5px var(--mono); color: var(--faint); margin: 0 0 30px; }
.shift { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 620px; }
.shift > div { border: 1px solid var(--line2); border-radius: 13px; padding: 14px 18px; background: var(--panel); }
.shift span { display: block; font: 12px var(--mono); color: var(--faint); margin-bottom: 4px; }
.shift b { font: 600 26px var(--head); }
.shift .down b { color: var(--freio); } .shift .same b { color: #ff817c; }
.pipes { display: grid; gap: 14px; margin: 26px 0; }
.pipe { display: grid; grid-template-columns: 74px repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.pipelabel { font: 500 12px var(--mono); color: var(--faint); }
.pipestage { position: relative; border: 1px solid var(--line2); border-radius: 10px; padding: 16px 14px; background: var(--panel); font-size: 14.5px; text-align: center; }
.pipestage.narrow { border-color: #ff554f; background: rgba(255, 85, 79, 0.08); padding-top: 9px; padding-bottom: 9px; margin: 7px 18px; }
.pipestage em { display: block; font: 600 10.5px var(--mono); font-style: normal; color: #ff817c; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.pipestage em.done { color: var(--agente); }
.motto { font: 600 clamp(22px, 2.7vw, 32px)/1.2 var(--head); letter-spacing: -0.02em; margin: 34px 0 20px; }
.motto.small { font-size: 19px; color: #d6d6dc; font-weight: 500; }
.twocards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 18px 0; }
.twocards.plain { grid-template-columns: 1fr 1fr; }
.mcard { border: 1px solid var(--line2); border-radius: 14px; padding: 18px 20px; background: var(--panel); }
.mcard h3 { font-size: 19px; margin-bottom: 6px; }
.mcard p { margin: 0; color: var(--muted); font-size: 14.5px; }
.mcard.bad { border-color: rgba(248, 113, 113, 0.4); } .mcard.good { border-color: rgba(79, 220, 139, 0.4); }
.tagx { display: flex; align-items: center; gap: 6px; font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin-bottom: 8px; }
.bad .tagx, .no .tagx, .askno .tagx { color: var(--bad); } .good .tagx, .ok .tagx, .askok .tagx { color: var(--freio); }
.sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin: 24px 0; }
.sum > div { flex: 1 1 200px; border: 1px solid var(--line2); border-radius: 14px; padding: 16px 18px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.sum h4 { font-size: 16px; margin-bottom: 4px; }
.sum span { font-size: 14px; color: var(--muted); }
.sum > b { align-self: center; font: 600 24px var(--mono); color: var(--faint); }
.sum .res { justify-content: center; align-items: center; font: 600 20px var(--head); border-color: #ff554f; background: rgba(255, 85, 79, 0.08); text-align: center; }
.mquote { margin: 26px 0; border-left: 2px solid #e53535; padding: 4px 0 4px 24px; max-width: 760px; }
.mquote p { font: 500 19px/1.5 var(--head); margin: 0 0 8px; color: #e4e4ea; }
.mquote cite { font: 12.5px var(--mono); font-style: normal; color: var(--faint); }
.mquote cite::before { content: ''; }
.gtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gpanel { border: 1px solid var(--line2); border-radius: 16px; padding: 22px 24px; background: var(--panel); background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0); background-size: 22px 22px; }
.gscene { font: 11.5px var(--mono); color: var(--faint); margin-bottom: 8px; }
.gpanel h3 { font-size: 23px; margin-bottom: 6px; }
.gq { color: var(--muted); margin: 0 0 18px; }
.gsides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gside { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--line2); background: #0d0d10; }
.gside.lose { border-color: rgba(248, 113, 113, 0.4); } .gside.win { border-color: rgba(79, 220, 139, 0.4); }
.gres { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.lose .gres { color: var(--bad); } .win .gres { color: var(--freio); }
.gside h4 { font-size: 16.5px; margin-bottom: 4px; }
.gside p { margin: 0; color: var(--muted); font-size: 14px; }
.gscore { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px 0 4px; font: 12.5px var(--mono); color: var(--muted); }
.gscore b { font: 700 40px var(--mono); } .gscore b.lose { color: var(--bad); } .gscore b.win { color: var(--freio); }
.gscore i { font-style: normal; color: var(--faint); }
.gnote { text-align: center; color: var(--faint); font-size: 12.5px; margin: 0 0 18px; }
.gmap { display: grid; gap: 6px; }
.gmap > div { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) minmax(0, 0.9fr); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; font-size: 14px; background: #0d0d10; }
.gmap i { font-style: normal; color: var(--faint); text-align: center; }
.gmap small { color: var(--faint); font-size: 12.5px; text-align: right; }
.gmap .key { border-color: rgba(245, 183, 61, 0.45); background: var(--pessoa-bg); }
.gmap .key small { color: var(--pessoa); }
.gclose { color: #d0d0d7; margin: 18px 0 0; max-width: 74ch; }
.hintline { color: var(--faint); font-size: 13px; margin: 0 0 14px; }
.px { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.pxnav { display: grid; gap: 4px; }
.pxnav button { display: flex; gap: 12px; align-items: baseline; text-align: left; padding: 9px 12px; border-radius: 9px; border: 1px solid transparent; color: var(--muted); font-size: 14px; }
.pxnav button b { font: 500 11px var(--mono); color: var(--faint); }
.pxnav button:hover { color: var(--text); background: var(--panel); }
.pxnav button.on { color: var(--text); background: var(--panel2); border-color: var(--line2); }
.pxnav button.on b { color: #ff817c; }
.pxstage { position: relative; border: 1px solid var(--line2); border-radius: 16px; padding: 26px 28px 20px; background: var(--panel); min-height: 420px; overflow: hidden; outline: none; }
.pxstage:focus-visible { border-color: var(--accent); }
.bign { position: absolute; right: 18px; top: -6px; font: 700 92px var(--mono); color: rgba(255, 255, 255, 0.045); letter-spacing: -0.05em; pointer-events: none; }
.pxstage h3 { font-size: 25px; line-height: 1.2; max-width: 22ch; margin-bottom: 10px; }
.pxstage .why { color: #cfcfd6; margin: 0 0 18px; max-width: 64ch; }
.cmp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cmp2 > div { border-radius: 12px; padding: 12px 14px; font-size: 14.5px; border: 1px solid var(--line2); background: #0d0d10; }
.cmp2 .no { border-color: rgba(248, 113, 113, 0.35); } .cmp2 .ok { border-color: rgba(79, 220, 139, 0.35); }
.hmh { display: flex; align-items: stretch; gap: 8px; margin-bottom: 14px; }
.hmh span { flex: 1; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--line2); font-size: 13.5px; }
.hmh span.h { background: var(--pessoa-bg); border-color: rgba(245, 183, 61, 0.35); } .hmh span.m { flex: 2; background: var(--agente-bg); border-color: rgba(130, 172, 255, 0.35); }
.hmh b { display: block; } .hmh small { color: var(--muted); }
.hmh i { align-self: center; width: 14px; height: 1px; background: var(--line2); }
.minibars { display: grid; gap: 7px; margin-bottom: 12px; }
.minibars div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13.5px; color: var(--muted); }
.minibars i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--freio), #ff554f); min-width: 8px; }
.tagchip.ok { border-style: solid; border-color: rgba(79, 220, 139, 0.4); color: #bfeed3; }
.pnote { color: var(--muted); font-size: 14px; margin: 0 0 12px; max-width: 68ch; }
.pex { border-left: 2px solid var(--accent); padding: 2px 0 2px 16px; color: #d6d6dc; font-size: 14.5px; margin-bottom: 12px; max-width: 70ch; }
.pex b { display: block; font: 600 11px var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.px-ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--faint); }
.ways { display: grid; gap: 10px; margin: 22px 0; }
.way { border: 1px solid var(--line2); border-radius: 14px; padding: 16px 18px; background: var(--panel); }
.way.ours { border-color: rgba(79, 220, 139, 0.4); }
.waytag { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; }
.waytag b { font: 600 16px var(--head); } .waytag span { font: 11.5px var(--mono); color: var(--faint); }
.waysteps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.waysteps span { border: 1px solid var(--line2); border-radius: 9px; padding: 7px 12px; font-size: 14px; background: #0d0d10; }
.waysteps i, .cutline i { font-style: normal; color: var(--faint); }
.way p { margin: 0; color: var(--muted); font-size: 14px; }
.manifesto .callout { max-width: 820px; margin: 10px 0; }
.manifesto .btn.primary { background: #e53535; border-color: #e53535; color: #fff; margin: 4px 0 14px; }
.msub { font-size: 22px; margin: 38px 0 6px; }
table.modes td:first-child { width: 26%; color: var(--muted); }
.lvl { display: inline-flex; gap: 4px; }
.lvl i { width: 22px; height: 8px; border-radius: 3px; background: var(--line2); }
.lvl.plan i.on { background: var(--pessoa); } .lvl.hard i.on { background: #ff554f; }
.cutline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.cutline span { border: 1px solid var(--line2); border-radius: 9px; padding: 8px 14px; font-size: 14px; background: var(--panel); }
.cutline .c0 { padding: 18px 34px; border-color: rgba(245, 183, 61, 0.4); background: var(--pessoa-bg); font-weight: 600; }
.cutline .c1 { border-style: dashed; color: var(--muted); }
.cutline .c2 { border-color: rgba(255, 85, 79, 0.45); background: rgba(255, 85, 79, 0.08); font-weight: 600; }
.moments { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.moment { border: 1px solid var(--line2); border-radius: 14px; padding: 16px 18px; background: var(--panel); }
.moment.m0 { border-color: rgba(245, 183, 61, 0.35); } .moment.m1 { border-color: rgba(130, 172, 255, 0.35); }
.moment.m0 .phasetag { color: var(--pessoa); } .moment.m1 .phasetag { color: var(--agente); }
.moment h3 { font-size: 19px; margin-bottom: 10px; }
.moment em { font: 11.5px var(--mono); font-style: normal; color: var(--faint); }
.askcmp { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px; margin: 22px 0; align-items: start; }
.askno, .askok { border: 1px solid var(--line2); border-radius: 14px; padding: 16px 18px; background: var(--panel); display: grid; gap: 7px; }
.askno { border-color: rgba(248, 113, 113, 0.35); } .askok { border-color: rgba(79, 220, 139, 0.35); }
.askcmp .bubble { max-width: 92%; padding: 8px 12px; font-size: 13.5px; }
.askcmp .bubble.big { max-width: 100%; font-size: 14.5px; line-height: 1.6; padding: 12px 15px; }
.askcmp p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.askok .btn { justify-self: start; margin: 4px 0 8px; }
.askok ul.checks { font-size: 14px; }
.taskcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.taskcol { border: 1px solid var(--line2); border-radius: 14px; padding: 16px 18px; background: var(--panel); }
.taskcol h4 { font-size: 16.5px; margin-bottom: 10px; }
.task { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; margin-bottom: 6px; font-size: 13.5px; background: #0d0d10; }
.task em { font: 11.5px var(--mono); font-style: normal; color: var(--faint); }
.watch .task.s0 em { color: var(--pessoa); }
.fire .task.s0 em { color: var(--freio); } .fire .task.s2 em { color: var(--pessoa); } .fire .task.s2 { border-color: rgba(245, 183, 61, 0.4); }
.fire .task.s1 em, .fire .task.s3 em, .fire .task.s4 em { color: var(--agente); }
.taskcol p { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }
.riskscale { margin: 26px 0 18px; }
.riskbar { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--freio), var(--pessoa), #ff554f); }
.riskitems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.riskitems span { font-size: 13.5px; color: #d6d6dc; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; background: var(--panel); }
.riskends { display: flex; justify-content: space-between; font: 11.5px var(--mono); color: var(--faint); margin-top: 8px; }
.govgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 22px; }
.govgrid > div { border: 1px solid var(--line2); border-radius: 14px; padding: 16px 18px; background: var(--panel); }
.govgrid h3 { font-size: 17.5px; margin-bottom: 5px; }
.govgrid p { margin: 0; color: var(--muted); font-size: 14.5px; }
.dd { margin-top: 22px; display: grid; gap: 6px; }
.dd-h, .dd-r { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 10px; align-items: center; }
.dd-h { font: 500 11.5px var(--mono); color: var(--faint); padding: 0 14px 4px; }
.dd-r span { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14.5px; background: var(--panel); }
.dd-r .bad { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, 0.6); }
.dd-r .good { border-color: rgba(79, 220, 139, 0.35); }
.dd-r i { font-style: normal; color: var(--faint); text-align: center; }
.oneliner { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; margin: 14px 0 0; }
.oneliner s { font: 500 22px var(--head); color: var(--faint); text-decoration-color: var(--bad); }
.oneliner b { font: 700 clamp(34px, 5vw, 58px) var(--head); letter-spacing: -0.03em; color: #ff554f; }
.author { margin-top: 36px; border: 1px solid var(--line2); border-radius: 16px; padding: 22px 24px; background: var(--panel); max-width: 760px; }
.author h3 { font-size: 22px; }
.author .role { font: 12.5px var(--mono); color: var(--faint); margin: 2px 0 14px; }
.author p { color: #d0d0d7; margin: 0 0 12px; }
.otherlang { font: 11.5px var(--mono); color: var(--faint); margin-bottom: 6px; }

@media (max-width: 1180px) {
  .ghbtn span { display: none; }
}
@media (max-width: 900px) {
  .tryit, .homeopen { grid-template-columns: 1fr; gap: 22px; }
  .phasecards, .twocards { grid-template-columns: 1fr; }
  .phasearrow { justify-self: center; transform: rotate(90deg); }
  .px { grid-template-columns: 1fr; }
  .pxnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .askcmp, .taskcols, .moments, .gsides, .cmp2, .manualgrid, .twocards.plain { grid-template-columns: 1fr; }
  .gmap > div { grid-template-columns: 1fr; gap: 2px; text-align: left; }
  .gmap small { text-align: left; } .gmap i { display: none; }
  .pipe { grid-template-columns: 1fr; }
  .pipestage.narrow { margin: 0 24px; }
  .cta { display: none; }
  .pxstage { padding: 20px 18px 16px; min-height: 0; }
  .bign { font-size: 64px; }
  .mapcard svg.flow { min-width: 820px; }
}
@media (max-width: 650px) {
  .ghbtn { display: none; }
  .langs button { padding: 6px 7px; }
  .riskitems { grid-template-columns: 1fr 1fr; }
  .dd-h, .dd-r { grid-template-columns: 1fr; }
  .dd-r i { display: none; } .dd-h span:nth-child(2) { display: none; }
  .hmh { flex-direction: column; } .hmh i { display: none; }
  .minibars div { grid-template-columns: 1fr; gap: 3px; }
  .creditlinks a { display: inline-block; margin: 0 14px 4px 0; }
}

/* The manifesto is an editorial surface within the documentation shell. */
.manifesto { max-width: 1240px; container-type: inline-size; padding-top: 52px; }
.manifesto .m-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-hero-note small { display: block; font: 10px/1.7 var(--mono); color: var(--muted); margin-top: 28px; }
.m-essay-chapter { border-top: 1px solid var(--line2); }
.m-essay-chapter .sectionlead { max-width: 62ch; margin-bottom: 38px; color: var(--text); font-size: 21px; }
.m-prose { max-width: 68ch; font-size: 17px; line-height: 1.9; color: var(--muted); margin: 24px 0; }
.m-prose strong { font-weight: 650; color: var(--text); }
.m-source-note { max-width: 82ch; border-left: 2px solid var(--line2); padding-left: 18px; font-size: 12px; line-height: 1.8; color: var(--faint); margin-top: 32px; }
.m-essay-sub { max-width: 38ch; font: 600 clamp(24px, 2.7vw, 32px)/1.25 var(--head); margin: 48px 0 22px; scroll-margin-top: 100px; }
.m-essay-chapter .m-diagram { margin: 38px 0; }
.m-essay-chapter .mdg-learning { max-width: 640px; }
.m-video { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 26px; max-width: 780px; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); margin: 38px 0; padding: 30px 0; }
.m-video-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid #ff554f; color: #ff554f; font-size: 18px; }
.m-video h3 { font: 600 27px/1.25 var(--head); margin: 12px 0; }
.m-video h3 a { display: inline-flex; gap: 14px; align-items: center; color: var(--text); }
.m-video p { color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 60ch; }
.m-video .m-video-by { font: 11px/1.5 var(--mono); }
.m-video .m-text-link { margin-top: 16px; }
.m-appendix { border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); margin: 34px 0; scroll-margin-top: 100px; }
.m-appendix summary { padding: 22px 0; cursor: pointer; color: var(--text); font: 500 18px/1.4 var(--head); }
.m-appendix summary::marker { color: #ff554f; }
.m-appendix[open] summary { color: #ff817c; }
.m-appendix-body { padding: 6px 0 26px; }
.m-signature { display: grid; gap: 9px; margin-top: 42px; padding-top: 24px; border-top: 1px solid #ff554f; max-width: 68ch; }
.m-signature b { font: 600 26px/1.4 var(--head); }
.m-signature span { color: var(--muted); font-size: 14px; }
.m-signature .m-text-link { margin-top: 15px; }
@container (max-width: 740px) {
  .manifesto .m-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-prose { font-size: 16px; line-height: 1.85; }
  .m-essay-chapter .sectionlead { font-size: 19px; }
  .m-video { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
  .m-video-mark { width: 36px; height: 36px; font-size: 13px; }
  .m-video h3 { font-size: 23px; }
  .m-video h3 svg { flex: none; }
}
.manifesto > section { padding-top: 64px; margin-top: 64px; }
.manifesto h2 { font-size: clamp(34px, 4.1vw, 56px); font-weight: 650; line-height: 1.06; max-width: 28ch; }
.manifesto h2 > span { color: #ff554f; }
.manifesto .eyebrow { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #ff817c; margin-bottom: 20px; }
.manifesto .sectionlead { max-width: 68ch; font-size: 18px; line-height: 1.65; margin-top: 22px; }
.mhero { display: grid; grid-template-columns: minmax(0, 1fr) 184px; gap: 40px; padding-bottom: 48px; }
.mhero h1 { font-size: clamp(54px, 6.5vw, 100px); font-weight: 700; line-height: 1.01; letter-spacing: -.045em; margin: 0 0 28px; }
.mhero .lead { font-size: 20px; line-height: 1.6; margin-top: 26px; max-width: 49ch; }
.mhero .byline { color: var(--muted); font-size: 12px; line-height: 1.8; }
.m-hero-note { border-left: 1px solid var(--line2); padding-left: 24px; margin-top: 32px; }
.m-hero-note > span { font: 11px var(--mono); color: var(--faint); }
.m-hero-note > p { font: 13px/1.8 var(--mono); margin: 52px 0 40px; text-transform: uppercase; letter-spacing: .035em; color: #c3c3cb; }
.m-hero-note .shift { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; }
.m-hero-note .shift > div { border: 0; padding: 0; background: none; }
.m-hero-note .shift span { font-size: 11px; }
.m-hero-note .shift b { display: flex; align-items: center; gap: 6px; font-size: 18px; margin-top: 6px; }
.m-hero-note .shift .down svg { transform: rotate(90deg); }
.m-text-link { display: inline-flex; align-items: center; gap: 12px; color: #ff817c; font-weight: 600; font-size: 14px; margin-top: 22px; }
.m-chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.m-chapters a { padding: 20px 20px 22px 0; color: var(--text); }
.m-chapters a + a { border-left: 1px solid var(--line); padding-left: 20px; }
.m-chapters a > span { display: block; color: #ff817c; font: 11px var(--mono); margin-bottom: 10px; }
.m-chapters b { display: block; font: 600 16px var(--head); }
.m-chapters small { display: block; color: var(--faint); font-size: 11px; margin-top: 6px; }
.m-ledger { margin: 32px 0; }
.m-ledger-head, .m-ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.m-ledger-head { padding-bottom: 18px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.m-ledger-row { border-top: 1px solid var(--line); padding: 19px 0; }
.m-ledger-row > span { display: flex; align-items: baseline; gap: 15px; font-size: 15px; color: var(--muted); }
.m-ledger-row > span + span { color: var(--text); }
.m-ledger-row small { flex: none; font: 10px var(--mono); color: var(--faint); }
.m-ledger-row svg { flex: none; color: #ff817c; align-self: center; }
.m-pact .m-ledger-head > span:last-child { color: var(--agente); }
.m-pact .m-ledger-head > span:first-child { color: #ff817c; }
.m-section-note { max-width: 72ch; border-left: 2px solid #ff554f; padding: 4px 0 4px 20px; font-size: 15px; color: var(--muted); margin: 28px 0; }
.m-statement { font: 650 clamp(30px, 4.1vw, 52px)/1.13 var(--head); letter-spacing: -.025em; max-width: 28ch; margin: 46px 0 28px; }
.m-statement.smaller { font-size: clamp(28px, 3.5vw, 42px); }
.m-statement > span { display: block; color: #ff554f; }
.m-learning-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: center; }
.m-learning-top h2 { font-size: clamp(32px, 3.5vw, 48px); }
.m-learning-top .sectionlead { font-size: 16px; }
.m-editorial-list { list-style: none; margin: 32px 0; padding: 0; }
.m-editorial-list li { display: flex; align-items: baseline; gap: 18px; border-top: 1px solid var(--line); padding: 23px 0; min-width: 0; }
.m-editorial-list li > span { flex: none; font: 11px var(--mono); color: #ff817c; }
.m-editorial-list h3 { font-size: 20px; line-height: 1.25; }
.m-editorial-list p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 10px 0 0; }
.m-three, .m-two { display: grid; gap: 0 30px; }
.m-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-brakes li { padding: 25px 0; border-left: 1px solid var(--freio); padding-left: 22px; }
.m-brakes li > span { color: var(--freio); }
.m-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; margin: 30px 0; gap: 22px 34px; }
.m-questions li { border-top: 1px solid var(--line2); padding-top: 18px; }
.m-questions span { font: 12px var(--mono); color: #ff817c; }
.m-questions p { font: 500 22px/1.35 var(--head); max-width: 26ch; margin: 14px 0 6px; }
.m-principles-hint { color: var(--muted); font-size: 14px; margin: 18px 0 28px; }
.m-principle-list { display: grid; gap: 20px; }
.manifesto .m-principle-list .pxstage { min-height: 0; border-left: 0; border-top: 1px solid var(--line2); padding: 26px 0; scroll-margin-top: 30px; }
.manifesto .px { gap: 30px; grid-template-columns: 235px minmax(0, 1fr); }
.manifesto .pxnav button { border-radius: 0; border: 0; border-left: 2px solid transparent; padding: 11px 12px; font-size: 13px; }
.manifesto .pxnav button.on { border-left-color: #ff554f; color: #ff817c; background: none; }
.manifesto .pxstage { background: none; border: 0; border-left: 1px solid var(--line2); border-radius: 0; padding: 20px 0 20px 28px; min-height: 430px; }
.manifesto .pxstage h3 { font-size: 32px; }
.manifesto .cmp2 > div { border-radius: 3px; background: none; }
.manifesto .gpanel { background-image: none; border-radius: 4px; padding: 28px; }
.manifesto .gside { border-radius: 3px; }
.manifesto .gmap > div { border-radius: 3px; }
.manifesto .gclose { font-size: 16px; line-height: 1.75; }
.manifesto .mquote { border: 0; padding: 20px 0 30px; max-width: 38ch; }
.manifesto .mquote p { font-size: clamp(26px, 3vw, 36px); line-height: 1.35; }
.manifesto .sum { margin-top: 30px; }
.manifesto .sum > div { border-radius: 3px; background: none; }
.manifesto .twocards.plain { gap: 26px; }
.manifesto .twocards.plain .mcard { background: none; border: 0; border-top: 2px solid var(--line2); border-radius: 0; padding: 22px 0; }
.manifesto .twocards.plain .good { border-color: var(--freio); }
.manifesto .twocards.plain .bad { border-color: var(--bad); }
.manifesto .ways { gap: 28px; margin: 36px 0; }
.m-way { padding-top: 22px; border-top: 1px solid var(--line2); }
.m-way .waytag { justify-content: space-between; }
.m-gate-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 28px 0; }
.m-gate-ledger > a { border-top: 1px solid var(--line); padding: 12px 0; display: flex; gap: 15px; align-items: baseline; font-size: 13px; color: var(--text); }
.m-gate-ledger small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.m-gate-ledger svg { margin-left: auto; flex: none; color: var(--faint); }
.m-gate-ledger b { color: var(--pessoa); font: 11px var(--mono); }
.m-workflow-head h2 > span { color: var(--agente); }
.manifesto .modes { table-layout: fixed; width: 100%; }
.manifesto .modes th, .manifesto .modes td { overflow-wrap: anywhere; }
.manifesto .moments { gap: 24px; }
.manifesto .moment { border-radius: 0; border: 0; border-top: 2px solid var(--pessoa); background: none; padding: 22px 0; }
.manifesto .moment.m1 { border-color: var(--agente); }
.manifesto .moment ul { padding-left: 20px; font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.manifesto .askno, .manifesto .askok, .manifesto .taskcol { border-radius: 4px; }
.m-task-network { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 18px; align-items: center; }
.m-task-origin { color: var(--pessoa); }
.m-task-branches { border-left: 1px solid var(--line2); padding-left: 18px; }
.m-task-branches .task { position: relative; }
.m-task-branches .task::before { content: ''; position: absolute; width: 18px; height: 1px; background: var(--line2); right: 100%; top: 50%; }
.manifesto .task { border-radius: 3px; gap: 8px; }
.manifesto .task em { font-size: 10px; text-align: right; }
.manifesto .author { border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 28px 0; background: none; }
.manifesto .oneliner { display: block; }
.manifesto .oneliner s { display: block; margin-bottom: 14px; }
.manifesto .oneliner b { display: block; font-size: clamp(44px, 6vw, 78px); line-height: 1.05; }
.manifesto .mclose { padding-bottom: 48px; }
.m-diagram { margin: 28px 0; min-width: 0; }
.mdg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mdg-svg text { stroke: none; }
.mdg-mobile { display: none; }
.mdg-label { fill: var(--text); font: 600 15px var(--head); }
.mdg-note { fill: var(--muted); font: 12px var(--sans); }
.mdg-number, .mdg-phase { fill: var(--muted); font: 11px var(--mono); letter-spacing: .04em; }
.mdg-pipe-tag { fill: var(--text); font: 11px var(--mono); }
.mdg-node rect { fill: var(--bg); stroke-width: 1.3; }
.mdg-node.human rect { stroke: var(--pessoa); }
.mdg-node.agent rect { stroke: var(--agente); }
.mdg-node.check rect { stroke: var(--freio); }
.mdg-node.muted rect { stroke: var(--line2); }
.mdg-node.human .mdg-label { fill: var(--pessoa); }
.mdg-node.agent .mdg-label { fill: var(--agente); }
.mdg-node.check .mdg-label { fill: var(--freio); }
.mdg-edge { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.mdg-edge.feedback { stroke: var(--agente); stroke-dasharray: 4 5; }
.mdg-edge.retry { stroke: #ff554f; }
.mdg-retry-label { fill: #ff817c; }
.mdg-gate path { fill: var(--bg); stroke: var(--pessoa); stroke-width: 1.3; }
.mdg-gate-label { fill: var(--pessoa); font: 11px var(--mono); }
.mdg-gate-note { fill: var(--muted); font: 10px var(--sans); }
.mdg-center { fill: none; stroke: var(--line2); }
.mdg-center-label { fill: var(--text); font: 500 18px var(--head); }
.mdg-pipes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mdg-bottleneck .mdg-note { font-size: 17px; }
.mdg-bottleneck .mdg-phase { font-size: 16px; }
.mdg-bottleneck .mdg-pipe-tag { font-size: 14px; }
.mdg-learning > .mdg-svg .mdg-label { font-size: 17px; }
.mdg-learning > .mdg-svg .mdg-note { font-size: 14px; }
.mdg-learning > .mdg-svg .mdg-center-label { font-size: 20px; }
.m-diagram figcaption { color: var(--faint); font-size: 12px; line-height: 1.7; margin-top: 10px; max-width: 70ch; }
.mdg-learning .m-diagram { margin: 0; }
.mdg-learning .m-diagram figcaption { display: none; }
.m-diagram-legend { display: flex; flex-wrap: wrap; gap: 20px; margin: 30px 0 0; font: 11px var(--mono); color: var(--muted); }
.m-diagram-legend span { display: flex; gap: 8px; align-items: center; }
.m-diagram-legend i { width: 9px; height: 9px; border: 1px solid; }
.m-diagram-legend .human i { border-color: var(--pessoa); transform: rotate(45deg); }
.m-diagram-legend .agent i { border-color: var(--agente); }
.m-diagram-legend .check i { border-color: var(--freio); border-radius: 50%; }
@container (max-width: 740px) {
  .mhero { grid-template-columns: minmax(0, 1fr); }
  .m-hero-note { display: none; }
  .mhero h1 { font-size: clamp(54px, 9cqw, 78px); }
  .m-learning-top { grid-template-columns: 1fr; }
  .mdg-desktop { display: none; }
  .mdg-mobile { display: block; }
  .mdg-mobile .mdg-svg.mdg-desktop { display: none; }
  .mdg-learning { max-width: 440px; margin: 20px auto; }
  .mdg-pipes { grid-template-columns: 1fr; }
  .mdg-bottleneck { max-width: 600px; }
  .m-diagram:has(> .mdg-mobile) { max-width: 460px; margin-left: auto; margin-right: auto; }
  .m-three { grid-template-columns: 1fr; gap: 0; }
  .manifesto .px { grid-template-columns: 1fr; }
  .manifesto .pxnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manifesto .pxstage { border-left: 0; border-top: 1px solid var(--line2); padding: 25px 0; }
  .manifesto .sum { grid-template-columns: 1fr; }
  .manifesto .sum > b { justify-self: center; }
  .manifesto .gsides, .manifesto .cmp2, .manifesto .askcmp, .manifesto .taskcols { grid-template-columns: 1fr; }
}
@container (max-width: 480px) {
  .manifesto h2 { font-size: 36px; }
  .mhero h1 { font-size: 54px; }
  .mhero .lead { font-size: 18px; }
  .m-chapters { grid-template-columns: 1fr 1fr; }
  .m-chapters a { padding: 16px 12px; }
  .m-chapters a:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .m-chapters a:nth-child(4) { border-top: 1px solid var(--line); }
  .m-chapters small { font-size: 10px; }
  .m-two, .m-questions, .m-ledger-head, .m-ledger-row, .m-gate-ledger { grid-template-columns: 1fr; }
  .m-ledger-head { display: none; }
  .m-ledger-row { gap: 13px; }
  .m-ledger-row > span:first-child { color: var(--muted); }
  .m-pact .m-ledger-row > span:first-child { color: #ff817c; }
  .m-pact .m-ledger-row > span:last-child { color: var(--agente); }
  .m-pact .m-ledger-row > span:last-child { padding-left: 28px; }
  .m-editorial-list p { font-size: 15px; }
  .manifesto .gpanel { padding: 20px 16px; }
  .manifesto .gscore { gap: 9px; font-size: 10px; }
  .manifesto .gscore b { font-size: 32px; }
  .manifesto .modes th, .manifesto .modes td { padding: 12px 8px; font-size: 12px; }
  .manifesto .modes .lvl { gap: 3px; }
  .manifesto .modes .lvl i { width: 12px; height: 6px; }
}

/* Chapter navigation spans two rows; each row starts at the reading edge. */
.manifesto .m-chapters a:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.manifesto .m-chapters a:nth-child(n + 4) { border-top: 1px solid var(--line); }
@container (max-width: 740px) {
  .manifesto .m-chapters a { padding: 16px 12px; border-left: 1px solid var(--line); }
  .manifesto .m-chapters a:nth-child(odd) { border-left: 0; padding-left: 0; }
  .manifesto .m-chapters a:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Invocation permissions and the optional skill pack. */
.invocation-badge{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;padding:3px 9px;font:600 10px/1.5 var(--mono);color:var(--muted);white-space:nowrap}
.inv-user{color:#f5b73d;border-color:#5d471f;background:#211a0c}
.inv-both{color:#aabaff;border-color:#3b4266;background:#161a2a}
.inv-agent{color:#7dd4ac;border-color:#284d3c;background:#111f19}
.row .invocation-badge{margin:5px 0}.rowdesc{margin-top:4px}
.invocation-legend{margin:24px 0 36px;padding:22px;border:1px solid var(--line2);border-radius:12px;background:var(--panel)}
.invocation-legend h3{margin:0 0 8px}.invocation-legend>p{color:var(--muted);font-size:13px;line-height:1.7;max-width:850px}
.invocation-legend>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:16px}
.invocation-legend>div p{margin:0;display:flex;align-items:flex-start;flex-direction:column;gap:8px;font-size:12px;line-height:1.7;color:var(--muted)}
.cmdwrap .minilabel{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.extras-install{margin-top:20px;padding:16px;border:1px solid var(--line2);border-radius:10px;background:var(--panel)}
.extras-install p{font-size:12px;line-height:1.7;color:var(--muted)}
.extras-install .cmd{max-width:100%}.tile.g-extras{color:#aabaff;background:#171b2c;border-color:#333c64}
.grp{scroll-margin-top:30px}.grp>div{min-width:0}
@media(max-width:700px){.invocation-legend>div{grid-template-columns:1fr;gap:18px}.invocation-legend{padding:18px}.invocation-badge{font-size:9px}}

/* Community: plain text conversations, with the same reading width as the guides. */
.forum-page{max-width:980px}.forum-page .lead{max-width:700px}
.forum-welcome{display:flex;align-items:center;gap:20px;margin:26px 0;color:var(--muted);font-size:13px}
.forum-welcome p{margin:0;line-height:1.7}.forum-open{flex-shrink:0;border:1px solid #284d3c;color:#7dd4ac;background:#111f19;border-radius:999px;padding:7px 12px;font:11px var(--mono)}
.forum-compose{margin:24px 0}.forum-compose>summary{width:fit-content;cursor:pointer;list-style:none}.forum-compose>summary::-webkit-details-marker{display:none}
.forum-form{margin:18px 0;padding:24px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);display:grid;gap:16px}
.forum-form label{display:grid;gap:8px;font-size:13px;color:var(--muted)}
.forum-form input,.forum-form textarea,.forum-form select{width:100%;min-width:0;box-sizing:border-box;font:14px/1.6 var(--sans);padding:11px 13px;border:1px solid var(--line2);border-radius:7px;background:var(--bg);color:var(--text)}
.forum-form textarea{resize:vertical;min-height:120px}.forum-form :is(input,textarea,select):focus{outline:2px solid #ff554f;outline-offset:2px}
.forum-form .btn{justify-self:start}.forum-form-note,.forum-privacy{font-size:12px;color:var(--muted);line-height:1.8}.forum-form-note{margin:0;max-width:670px}
.forum-honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.forum-topic{display:block;padding:25px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;overflow-wrap:anywhere}
.forum-topic h2{margin:12px 0 8px;font-size:22px;line-height:1.35}.forum-topic:hover h2{color:#ff817c}.forum-topic>p{font-size:14px;color:var(--muted);line-height:1.8;max-width:750px}
.forum-post-meta{display:flex;flex-wrap:wrap;gap:10px 18px;font:11px/1.7 var(--mono);color:var(--muted)}.forum-post-meta strong{color:var(--text);font-weight:500;overflow-wrap:anywhere}.forum-count{font:11px var(--mono);color:#7dd4ac}
.forum-empty{margin:30px 0;padding:40px 28px;border:1px dashed var(--line2);border-radius:12px}.forum-empty h2{font-size:22px}.forum-empty p,.forum-muted{color:var(--muted);font-size:14px}
.forum-post{padding:26px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.forum-post h2{font-size:28px;line-height:1.35}
.forum-message{white-space:pre-wrap;line-height:1.85;font-size:15px;max-width:760px}.forum-post-actions{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-top:20px}
.forum-report{flex:1;min-width:160px}.forum-report summary,.forum-text-button{color:var(--muted);font:11px var(--mono);cursor:pointer}.forum-text-button{border:0;background:none;padding:0;line-height:1.5}.forum-report .forum-form{max-width:600px}
.forum-error{color:#ff817c!important;font-size:13px;line-height:1.7}.forum-form-status:empty{display:none}.forum-form-status{margin:0;font-size:13px;color:#7dd4ac;line-height:1.7}
.forum-privacy{margin-top:45px;border-top:1px solid var(--line);padding-top:20px}.forum-privacy summary{cursor:pointer}.forum-privacy p{max-width:760px}.forum-back{display:inline-block;margin:15px 0 25px;color:var(--muted);font-size:13px}
.forum-form altcha-widget{--altcha-color-base:#111113;--altcha-color-text:#e4e4e7;--altcha-color-border:#3f3f46;--altcha-color-footer-bg:#18181b;max-width:100%}
.forum-page [hidden]{display:none!important}
@media(max-width:600px){.forum-welcome{align-items:flex-start;flex-direction:column;gap:12px}.forum-form{padding:18px 14px}.forum-topic h2{font-size:20px}.forum-post h2{font-size:24px}.forum-post-meta{gap:8px 12px}.forum-empty{padding:24px 18px}}