/* Kern: the agent's map, the route found and closed, the checker, the gate. Everything here is a phase of that story. */
.kn-stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px}
.kn-stage .pp-pane{min-height:420px}
.kn-pane-map{background:#151519;border-color:#3f3f47;padding-bottom:22px;display:flex;flex-direction:column;justify-content:center}
.kn-pane-side{display:flex;flex-direction:column;font-family:"Mona Sans",Arial,sans-serif;font-size:13px}
.kn-badge-route{background:rgba(242,164,94,.18);color:var(--flag)}
.kn-badge-ok{background:var(--accent);color:#1d1d1f}

/* The map */
.kn-map{position:relative;width:100%;aspect-ratio:100/62;font-family:"Mona Sans",Arial,sans-serif}
.kn-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kn-edge{fill:none;stroke:#5d5d66;stroke-width:.22;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease),stroke .6s var(--ease),stroke-width .6s var(--ease),opacity .8s var(--ease)}
.kn-node{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);width:max-content;max-width:30%;padding:7px 10px 6px;border-radius:8px;background:#26262b;border:1px solid #4b4b53;font-size:11px;line-height:1.3;color:var(--ink);text-align:left;opacity:0;transition:opacity .5s var(--ease),border-color .5s,box-shadow .5s}
.kn-node b{display:block;font-weight:500;white-space:nowrap}
.kn-node i{display:block;font-style:normal;font-size:9.5px;color:var(--mute);margin-top:2px;white-space:nowrap}
.kn-src i{color:var(--accent)}
.kn-node[data-n="inbound"] i{color:var(--flag)}
.kn-tool{border-radius:100px;padding:7px 12px 6px;background:#2d2d33}
.kn-tool i{display:none}
.kn-dst{border-style:solid}
.kn-node .pp-tick{position:absolute;right:-7px;top:-7px;width:16px;height:16px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.6);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.kn-node .pp-tick::before{border-color:#1d1d1f;left:5px;top:2px;width:4px;height:8px}
.kn-arrive{position:absolute;left:calc(15% + 4px);top:calc(80% + 22px);transform:translate(-50%,0);font:600 9.5px/1 "Mona Sans",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#1d1d1f;background:var(--flag);padding:5px 8px;border-radius:100px;opacity:0;transition:opacity .4s var(--ease)}

/* Phase sequence. Classes accumulate; the loop clears them. */
.p-map .kn-node{opacity:1;transition-delay:calc(var(--i) * 110ms)}
.p-edges .kn-edge{stroke-dashoffset:0;transition-delay:calc(var(--i) * 120ms)}
.p-route .kn-arrive{opacity:1;animation:kn-pulse 1.2s var(--ease) 2}
@keyframes kn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,164,94,.5)}50%{box-shadow:0 0 0 8px rgba(242,164,94,0)}}
.p-route .kn-edge.kn-trigger{stroke:var(--flag);opacity:.6;transition-delay:.3s}
.p-route .kn-edge.kn-leak{stroke:var(--flag);stroke-width:.42;transition-delay:.7s}
.p-route .kn-edge.kn-leak:last-of-type{transition-delay:1.2s}
.p-route .kn-node[data-n="outbound"]{border-color:var(--flag);box-shadow:0 0 0 3px rgba(242,164,94,.18);transition-delay:1.6s}
.p-route .kn-badge-route{opacity:1;transform:none;transition-delay:1.7s}
.p-closed .kn-edge.kn-cut{opacity:0;stroke-dashoffset:1;transition:opacity .7s var(--ease),stroke-dashoffset 1s var(--ease)}
.p-closed .kn-edge.kn-trigger{stroke:#5d5d66;opacity:1}
.p-closed .kn-edge.kn-leak:not(.kn-cut){stroke:#5d5d66;stroke-width:.22;transition-delay:.4s}
.p-closed .kn-edge:not(.kn-cut){animation:kn-sweep 1.1s var(--ease) calc(.8s + var(--i) * 110ms) both}
@keyframes kn-sweep{0%{stroke:#5d5d66}40%{stroke:var(--accent);stroke-width:.36}100%{stroke:#5d5d66}}
.p-closed .kn-node[data-n="outbound"]{border-color:#4b4b53;box-shadow:none;transition-delay:.2s}
.p-closed .kn-badge-route{opacity:0;transform:translateY(-4px);transition-delay:0s}
.p-closed .kn-badge-ok{opacity:1;transform:none;transition-delay:1.9s}
.p-closed .kn-arrive{opacity:0}
.p-enforce .kn-pane-map{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 24px 70px rgba(var(--accent-rgb),.12)}

/* The side pane: verdict, proof file, checker, gate */
.kn-verdict{display:grid;min-height:130px}
.kn-v{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.kn-v b{display:block;font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px}
.kn-v-route b{color:var(--flag)}
.kn-v-ok b{color:var(--accent)}
.kn-v p{font-size:13px;line-height:1.5;color:var(--text);max-width:none}
.kn-hops{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;font:11px/1 var(--mono)}
.kn-hops li{padding:6px 9px;border-radius:6px;background:rgba(242,164,94,.14);color:#f6d3b3;opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.kn-hops li+li::before{content:'→';margin-right:8px;color:var(--flag)}
.p-route .kn-v-route{opacity:1;transform:none;transition-delay:.5s}
.p-route .kn-hops li{opacity:1;transform:none}
.p-route .kn-hops li:nth-child(1){transition-delay:.7s}.p-route .kn-hops li:nth-child(2){transition-delay:1.1s}.p-route .kn-hops li:nth-child(3){transition-delay:1.5s}
.p-closed .kn-v-route{opacity:0;transition-delay:0s}
.p-closed .kn-v-ok{opacity:1;transform:none;transition-delay:1.6s}
.kn-stack{display:grid;margin-top:0;padding-top:18px}
.kn-pane-map .pp-pane-name em{transition:opacity .3s}
.p-route .kn-pane-map .pp-pane-name em,.p-closed .kn-pane-map .pp-pane-name em{opacity:0}
.kn-stack>*{grid-area:1/1;opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.kn-file,.kn-checker{display:grid;gap:5px;padding:14px 16px;border-radius:10px;background:#26262b;border:1px solid #4b4b53;font:12px/1.5 var(--mono);color:var(--text)}
.kn-file-name{font:500 10px/1.5 "Mona Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.kn-checker{border-color:rgba(var(--accent-rgb),.5);font-family:"Mona Sans",Arial,sans-serif;font-size:12.5px}
.kn-checker b{display:block;margin-top:6px;font-weight:500;color:var(--accent);opacity:0;transition:opacity .5s var(--ease)}
.kn-stack .kn-file{transform:translateY(-14px)}
.p-closed .kn-stack .kn-file{opacity:1;transform:none;transition-delay:1.2s}
.p-recheck .kn-stack .kn-file{opacity:0;transform:translateX(-24px);transition-delay:0s}
.p-recheck .kn-stack .kn-checker{opacity:1;transition-delay:.3s}
.p-recheck .kn-checker b{opacity:1;transition-delay:1.2s}
.p-enforce .kn-stack .kn-checker{opacity:0;transition-delay:0s}
.p-enforce .kn-stack .kn-gate{opacity:1;transition-delay:.2s}
.p-enforce .kn-gate .pp-calls li{opacity:1;transition-delay:calc(.4s + var(--i) * .5s)}
.kn-gate .pp-calls{font-size:12px}

/* Method figure */
.kn-mf .kn-map{max-width:640px;margin:0 auto}
.kn-mf .kn-arrive{display:none}
.kn-mf .kn-node{opacity:0}
.kn-mf .kn-edge{stroke-dashoffset:1}
[data-state="1"].is-on .s1 .kn-node{opacity:1;transition-delay:calc(var(--i) * 100ms)}
[data-state="1"].is-on .s1 .kn-edge{stroke-dashoffset:0;transition-delay:calc(.6s + var(--i) * 90ms)}
[data-state="1"].is-on .s1 :is(.kn-src,.kn-dst) .pp-tick{opacity:1;transform:none;transition-delay:calc(1.4s + var(--i) * .18s)}
[data-state="2"].is-on .s2 .kn-node{opacity:1}
[data-state="2"].is-on .s2 .kn-edge{stroke-dashoffset:0;animation:kn-sweep 1.1s var(--ease) calc(.3s + var(--i) * 110ms) both}
[data-state="2"].is-on .s2 .kn-edge.kn-leak{stroke:var(--flag);stroke-width:.42;transition-delay:1.6s;animation:none}
[data-state="2"].is-on .s2 .kn-node[data-n="outbound"]{border-color:var(--flag);box-shadow:0 0 0 3px rgba(242,164,94,.18);transition-delay:1.8s}
[data-state="2"].is-resolved .s2 .kn-edge.kn-cut{opacity:0;transition-delay:0s}
[data-state="2"].is-resolved .s2 .kn-edge.kn-leak{stroke:var(--accent);stroke-width:.3;transition-delay:.3s}
[data-state="2"].is-resolved .s2 .kn-node[data-n="outbound"]{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.kn-mf-gate{max-width:640px;margin:0 auto;width:100%}
[data-state="3"].is-on .s3 .pp-calls li{opacity:1;transition-delay:calc(.2s + var(--i) * .4s)}

/* Proof: the real screens, the live tools, the tampered file */
.kn-screens{position:relative;aspect-ratio:1512/1100;border-radius:14px;overflow:hidden;border:1px solid #4b4b53;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#0c0c10}
.kn-screen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.kn-screen-ok{opacity:0;transition:opacity 1s var(--ease)}
.kn-screens.is-resolved:not(.is-held) .kn-screen-ok,.kn-screens.is-held[data-show="ok"] .kn-screen-ok{opacity:1}
.kn-screens.is-held[data-show="leak"] .kn-screen-ok{opacity:0}
.kn-screen-toggle{position:absolute;right:14px;bottom:14px;display:flex;gap:4px;padding:4px;border-radius:100px;background:rgba(20,20,24,.9);border:1px solid #4b4b53}
.pp .kn-screen-toggle button{appearance:none;border:0;cursor:pointer;font:600 12px/1 "Mona Sans",Arial,sans-serif;padding:9px 14px;border-radius:100px;background:transparent;color:#f5f5f7;transition:background .25s,color .25s}
.pp .kn-screen-toggle button[aria-pressed="true"]{background:var(--accent);color:#1d1d1f}
.kn-tamper{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center}
.kn-tamper .kn-file,.kn-tamper .kn-checker{font-size:12px}
.kn-tamper-arrow{font-size:22px;color:var(--mute)}
.kn-tamper-line{position:relative;white-space:nowrap}
.kn-tamper-line s,.kn-tamper-line u{text-decoration:none;transition:opacity .4s var(--ease)}
.kn-tamper-line u{position:absolute;left:4.2em;opacity:0;color:#fff;background:rgba(242,164,94,.25);padding:0 3px;border-radius:3px}
.kn-cursor{display:inline-block;width:1px;height:1.1em;background:#fff;vertical-align:-2px;margin-left:2px;opacity:0}
.kn-tamper.is-on .kn-tamper-line s{opacity:0;transition-delay:1s}
.kn-tamper.is-on .kn-tamper-line u{opacity:1;transition-delay:1s}
.kn-tamper.is-on .kn-cursor{animation:kn-blink 1s steps(2) .6s 3}
@keyframes kn-blink{from{opacity:1}to{opacity:0}}
.kn-tamper-check{opacity:.35;transition:opacity .6s var(--ease),border-color .6s}
.kn-tamper.is-resolved .kn-tamper-check{opacity:1;border-color:var(--flag)}
.kn-tamper.is-resolved .kn-tamper-check b{opacity:1;color:var(--flag);transition-delay:.7s}

@media(max-width:1280px){
  .kn-node{font-size:10px}
  .kn-node i{font-size:9px}
}
@media(max-width:1000px){
  .kn-stage{grid-template-columns:1fr;gap:12px;padding-bottom:44px}
  .kn-stage .pp-pane{min-height:0}
  .kn-pane-map{padding-top:44px}
  .kn-pane-side{min-height:300px}
  .kn-verdict{min-height:120px}
}
@media(max-width:760px){
  .kn-stage .pp-pane{padding:42px 14px 14px}
  .kn-node{padding:5px 7px 4px;font-size:9.5px;max-width:31%}
  .kn-node i{font-size:8.5px}
  .kn-tool{padding:5px 9px 4px}
  .kn-arrive{font-size:8.5px;top:calc(80% + 18px)}
  .kn-tamper{grid-template-columns:1fr}
  .kn-tamper-arrow{transform:rotate(90deg);justify-self:center}
  .kn-screens{aspect-ratio:1512/1000}
  .kn-screen-toggle{right:8px;bottom:8px}
  .pp .kn-screen-toggle button{padding:8px 10px;font-size:11px}
}