.page-head { padding: 46px 0 8px; }
.eyebrow {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--g-action-text); margin: 0 0 16px;
}
h1 {
  margin: 0 0 16px; max-width: 22ch;
  font-size: clamp(30px, 5.4vw, 46px); line-height: 1.1;
  font-weight: 675; letter-spacing: -0.025em; text-wrap: balance;
}
.lede { margin: 0; font-size: 17.5px; color: var(--text-secondary); }
.lede .kw { color: var(--text-primary); font-weight: 600; }

section h2 {
  margin: 0 0 10px; font-size: 22px; font-weight: 650; letter-spacing: -0.018em;
}
section p { color: var(--text-secondary); font-size: 15.5px; }

.path-fig { padding: 34px 0 0; }
.path-fig figure { margin: 0; }

.path-fig svg { display: block; width: 100%; height: auto; }

@media (max-width: 1119px) {
  .diagram-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background:
      linear-gradient(90deg, var(--g-ink) 30%, transparent) left / 44px 100%,
      linear-gradient(-90deg, var(--g-ink) 30%, transparent) right / 44px 100%,
      radial-gradient(farthest-side at 0 50%, rgba(240, 243, 255, .08), transparent) left / 18px 100%,
      radial-gradient(farthest-side at 100% 50%, rgba(240, 243, 255, .08), transparent) right / 18px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .diagram-scroll svg { min-width: 1064px; }
}


.n-box { fill: var(--g-panel); stroke: var(--g-line-2); stroke-width: 1; }
.n-box.here { fill: var(--g-wash-solid); stroke: var(--g-action-line); }
.n-name { fill: var(--g-text); font: 600 13px var(--g-sans); }
.n-name.sm { font-size: 12px; }
.n-sub  { fill: var(--g-dim); font: 400 10.5px var(--g-mono); }
.n-sub.ok { fill: var(--g-live-text); }
.n-tag  { fill: var(--g-dim); font: 400 9.5px var(--g-mono); letter-spacing: .12em; text-transform: uppercase; }
.n-tag.acc { fill: var(--g-live-text); }
.n-tag.byok { fill: var(--g-warn-text); }
.n-tag.bad { fill: var(--g-danger-text); }
.n-tag.ok { fill: var(--g-live-text); }
.lane-lbl { font: 400 10.5px var(--g-mono); }
.lane-lbl.bad { fill: var(--g-danger-text); }
.lane-lbl.ok { fill: var(--g-live-text); }

.key text { fill: var(--g-dim); font: 400 10px var(--g-mono); }


.lg-anthropic, .lg-openai { color: var(--g-text-2); }
.lg-anthropic path, .lg-openai path { fill: currentColor; }

.waf { stroke: var(--g-line-2); stroke-width: 1; stroke-dasharray: 3 4; }
.border-line { stroke: var(--g-line-2); stroke-width: 1; stroke-dasharray: 5 5; }
.border-lbl { fill: var(--g-muted); font: 500 10px var(--g-mono); letter-spacing: .16em; }

.lane { fill: none; stroke: var(--g-action); stroke-width: 1.8; stroke-linecap: round; opacity: .85; }
.lane.thin { stroke-width: 1.3; opacity: .55; }

.pkt-req { fill: var(--g-action); }
.pkt-bad { fill: var(--g-danger); }
.pkt-ok  { fill: var(--g-live); }

.stub { fill: none; stroke: var(--g-dim); stroke-width: 1.1; stroke-linecap: round; opacity: .7; }
.stub-pkt { fill: var(--g-dim); }
.l-box { fill: none; stroke: var(--g-line-2); stroke-width: 1; stroke-dasharray: 4 4; }

.gate rect { fill: var(--g-warn-dim); stroke: var(--g-warn); stroke-width: 1; }
.gate line { stroke: var(--g-warn); stroke-width: 1; opacity: .5; }
.gate .glbl { fill: var(--g-warn-text); font: 500 9.5px var(--g-mono); letter-spacing: .12em; text-transform: uppercase; }

.drop { stroke: var(--g-danger); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .8; }
.swapbox { fill: var(--g-sunken); stroke: var(--g-line-2); stroke-width: 1; }
.swap { font: 400 10.5px var(--g-mono); }
.swap .k { fill: var(--g-dim); }
.swap-in .v { fill: var(--g-danger-text); }
.swap-out .v { fill: var(--g-live-text); }

.gate, .caught, .flow-on { display: none; }
.path-fig:has(#scan:checked) .gate,
.path-fig:has(#scan:checked) .caught,
.path-fig:has(#scan:checked) .flow-on { display: block; }
text.flow-on { display: none; }
.path-fig:has(#scan:checked) text.flow-on { display: block; }
.path-fig:has(#scan:checked) .flow-off { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .lane { stroke-dasharray: 620; stroke-dashoffset: 620; animation: lane-draw 1.6s cubic-bezier(.4, 0, .2, 1) .2s forwards; }
  .stub { stroke-dasharray: 120; stroke-dashoffset: 120; animation: lane-draw .9s ease-out 1.3s forwards; }

  .flow-off circle { animation: run-through 3.3s linear var(--d, 0s) infinite; }
  .flow-on .in     { animation: run-to-gate 3.3s linear var(--d, 0s) infinite; }
  .flow-on .out    { animation: run-from-gate 3.3s linear var(--d, 0s) infinite; }
  .caught .fall    { animation: fall-out 3.3s linear .5s infinite; }
  .stub-pkt        { animation: stub-drop 3.3s linear 1.1s infinite; }
  .gate rect       { animation: gate-pulse 3.3s ease-in-out infinite; }
}

@keyframes lane-draw { to { stroke-dashoffset: 0; } }

@keyframes run-through {
  0%   { transform: translateX(0);     opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(497px); opacity: 0; }
}

@keyframes run-to-gate {
  0%      { transform: translateX(0);     opacity: 0; }
  6%      { opacity: 1; }
  54%     { transform: translateX(376px); opacity: 1; }
  60%     { transform: translateX(376px); opacity: 0; }
  100%    { transform: translateX(376px); opacity: 0; }
}

@keyframes run-from-gate {
  0%, 8% { transform: translateX(0);     opacity: 0; }
  16%    { opacity: 1; }
  86%    { opacity: 1; }
  100%   { transform: translateX(121px); opacity: 0; }
}

@keyframes fall-out {
  0%, 14% { transform: translateY(0);    opacity: 0; }
  20%     { opacity: 1; }
  44%     { transform: translateY(26px); opacity: 1; }
  56%     { transform: translateY(26px); opacity: 0; }
  100%    { transform: translateY(26px); opacity: 0; }
}

@keyframes stub-drop {
  0%, 4% { transform: translate(0, 0); opacity: 0; }
  10%    { opacity: 1; }
  46%    { transform: translate(0, 72px); opacity: 1; }
  74%    { transform: translate(-30px, 72px); opacity: 1; }
  82%, 100% { transform: translate(-30px, 72px); opacity: 0; }
}

@keyframes gate-pulse {
  0%, 100% { fill: var(--g-warn-dim); }
  50%      { fill: rgba(245, 196, 81, .22); }
}

.scan-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 24px 0 0; padding: 17px 20px;
  border: 1px solid var(--border); border-radius: var(--g-radius-card);
  background: var(--bg-surface);
}
.scan-row label { font-size: 14.5px; font-weight: 550; cursor: pointer; }
.scan-note { font: 400 12.5px var(--g-mono); color: var(--text-muted); margin-left: auto; }

.scan-row input {
  appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 40px; height: 22px; border-radius: 999px;
  border: 1px solid var(--g-faint); background: var(--g-track);
  transition: background .18s ease, border-color .18s ease;
}
.scan-row input::before {
  content: ''; display: block; width: 16px; height: 16px; margin: 2px;
  border-radius: 50%; background: var(--g-dim);
  transition: transform .18s ease, background .18s ease;
}
.scan-row input:checked { background: var(--brand); border-color: var(--g-action-edge); }
.scan-row input:checked::before { transform: translateX(18px); background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .scan-row input, .scan-row input::before { transition: none; }
}

.payload {
  margin: 10px 0 0; padding: 13px 15px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--g-radius-card);
  background: var(--g-sunken);
  font: 400 13px/1.7 var(--g-mono); color: var(--text-secondary);
}
.payload .secret { color: var(--g-danger-text); }
.payload .red { color: var(--g-live-text); }
.payload .on { display: none; }

.scan-said { margin: 10px 0 0; font-size: 14px; color: var(--text-secondary); }
.scan-said .on { display: none; }
.path-fig:has(#scan:checked) .scan-said .off { display: none; }
.path-fig:has(#scan:checked) .scan-said .on { display: inline; }
.path-fig:has(#scan:checked) .payload .off { display: none; }
.path-fig:has(#scan:checked) .payload .on { display: inline; }

figcaption { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }

.keeps { padding: 46px 0 20px; display: grid; gap: 26px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .keeps { grid-template-columns: 1fr; } }
.keeps h2 {
  margin: 0 0 12px; font-size: 12px; font-weight: 650;
  font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.chips li {
  font: 400 12.5px var(--g-mono); padding: 5px 10px; border-radius: var(--g-radius-pill);
  border: 1px solid var(--g-line-2); color: var(--text-secondary); background: var(--g-wash);
}

.chips.never li {
  color: var(--text-muted); text-decoration: line-through;
  text-decoration-color: var(--g-danger); border-style: dashed;
}

.fine { margin: 14px 0 0; font-size: 13px; color: var(--text-muted); }
.fine code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

/* The two things the diagram cannot draw: a request that is sent twice, and how long
   a sign-in lasts. Same measure as the figure above them, and the same eyebrow the
   stored-fields lists use, so they read as a footnote to the picture. */
.fine-block { max-width: 660px; margin: 40px 0 0; }
.fine-block h2 {
  margin: 0 0 4px; font-size: 12px; font-weight: 650;
  font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.fine-block h2 + .fine { margin-top: 8px; }
.fine-block .fine + h2 { margin-top: 30px; }
.fine-block .fine strong { color: var(--text-secondary); }

@media (max-width: 640px) {
  .page-head { padding: 34px 0 4px; }
  .lede { font-size: 16.5px; }
  .scan-note { margin-left: 0; }
}