@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--accent:#5b9cf6;--bg0:#0a0f18;--bg1:#111a2b;--panel:#0c1422d6;--panel-solid:#0f1828;--ink:#dce6f5;--muted:#93a6c2;--line:#21314a;--code-bg:#08101c;--client:#38bdf8;--server:#f472b6;--handshake:#fbbf24;--appdata:#34d399;--ok:#34d399;--bad:#fb7185;--warn:#fbbf24}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--accent:#1d63d8;--bg0:#eef3fa;--bg1:#dde6f3;--panel:#ffffffeb;--panel-solid:#fff;--ink:#132033;--muted:#4a5b73;--line:#c7d3e3;--code-bg:#f3f7fc;--client:#0369a1;--server:#be1a6e;--handshake:#8a5a00;--appdata:#0b7a4d;--ok:#0b7a4d;--bad:#c02434;--warn:#8a5a00}*{box-sizing:border-box}html{background-color:var(--bg0)}body{color:var(--ink);background:radial-gradient(circle at 12% 12%, #5b9cf62e, transparent 38%), radial-gradient(circle at 88% 6%, #34d3991f, transparent 32%), linear-gradient(165deg, var(--bg0), var(--bg1));min-height:100svh;margin:0;font-family:Space Grotesk,system-ui,sans-serif}#app{width:min(1100px,100% - 2rem);margin:1rem auto 3rem}.shell{gap:1rem;animation:.48s fade-in;display:grid}h1,h2,h3,h4{margin:0}a{color:var(--accent)}.hero{border:1px solid var(--line);background:linear-gradient(150deg,#111a2be6,#080e1aeb);border-radius:18px;padding:1.5rem;box-shadow:0 16px 38px #02081266}:root[data-theme=light] .hero{background:linear-gradient(150deg,#fff,#e8f0fa);box-shadow:0 14px 34px #283c5a1f}.kicker{color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin:0;font-family:IBM Plex Mono,monospace;font-size:.78rem}h1{margin-top:.35rem;font-size:clamp(1.7rem,3.2vw,2.8rem)}.subtitle{color:var(--muted);max-width:72ch;margin-top:.6rem;line-height:1.5}.controls{flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.1rem;display:flex}.btn{border:1px solid var(--line);background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--ink);cursor:pointer;border-radius:999px;padding:.5rem .95rem;font-family:IBM Plex Mono,monospace;font-size:.85rem;transition:border-color .15s,background .15s,transform 50ms}.btn:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 18%, transparent)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 24%, transparent);font-weight:700}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.progress{color:var(--muted);margin-left:auto;font-family:IBM Plex Mono,monospace;font-size:.82rem}.panel{border:1px solid var(--line);background:var(--panel);border-radius:16px;min-width:0;padding:1.1rem 1.2rem}.sim,.ladder,.detail,.card,.keyrow,.kstage{min-width:0}.panel>h2{align-items:center;gap:.5rem;font-size:1.15rem;display:flex}.section-num{color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);border-radius:6px;padding:.1rem .4rem;font-family:IBM Plex Mono,monospace;font-size:.8rem}.lead{color:var(--muted);margin:.5rem 0 0;line-height:1.55}.flow-chips{flex-wrap:wrap;gap:.4rem;margin-top:.9rem;font-family:IBM Plex Mono,monospace;font-size:.78rem;display:flex}.flow-chips span{border:1px solid var(--line);color:var(--muted);background:var(--panel-solid);border-radius:999px;padding:.28rem .6rem}.flow-chips .arrow{color:var(--accent);background:0 0;border:none;padding:.28rem 0}.pillars{grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.9rem;display:grid}.pillar{border:1px solid var(--line);background:var(--panel-solid);border-radius:12px;padding:.7rem .8rem}.pillar strong{margin-bottom:.2rem;display:block}.pillar span{color:var(--muted);font-size:.85rem;line-height:1.45}.sim{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:1rem;display:grid}.ladder{gap:.35rem;display:grid}.lane-heads{justify-content:space-between;padding:0 .3rem .35rem;font-family:IBM Plex Mono,monospace;font-size:.85rem;font-weight:700;display:flex}.lane-heads .c{color:var(--client)}.lane-heads .s{color:var(--server)}.msg{border:1px solid var(--line);background:var(--panel-solid);cursor:pointer;opacity:.45;text-align:left;font:inherit;color:inherit;border-radius:10px;grid-template-columns:1fr auto 1fr;align-items:center;gap:.3rem;width:100%;padding:.45rem .6rem;transition:opacity .18s,border-color .18s,transform 50ms;display:grid}.msg:hover{opacity:.8}.msg.seen{opacity:1}.msg.current{opacity:1;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset, 0 6px 18px #5b9cf62e}.msg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.msg .label{font-family:IBM Plex Mono,monospace;font-size:.82rem}.msg .wire{text-align:center;color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:1.1rem}.msg.to-server .label{color:var(--client);grid-column:1}.msg.to-client .label{text-align:right;color:var(--server);grid-column:3}.msg .bytes{color:var(--muted);font-size:.7rem}.lock{border:1px solid var(--line);white-space:nowrap;border-radius:999px;padding:.05rem .4rem;font-size:.72rem}.lock.plaintext{color:var(--muted)}.lock.handshake{color:var(--handshake);border-color:color-mix(in srgb, var(--handshake) 45%, transparent)}.lock.application{color:var(--appdata);border-color:color-mix(in srgb, var(--appdata) 45%, transparent)}.detail{border:1px solid var(--line);background:var(--panel-solid);border-radius:12px;min-height:100%;padding:.9rem 1rem}.detail h3{font-size:1.05rem}.detail .dir{color:var(--muted);margin:.25rem 0 .7rem;font-family:IBM Plex Mono,monospace;font-size:.78rem}.detail h4{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin:.9rem 0 .35rem;font-size:.82rem}.detail ul{color:var(--muted);margin:0;padding-left:1.1rem;font-size:.9rem;line-height:1.5}.keys{gap:.35rem;margin-top:.4rem;display:grid}.keyrow{border:1px solid var(--line);background:var(--code-bg);border-radius:8px;justify-content:space-between;gap:.6rem;padding:.35rem .55rem;font-family:IBM Plex Mono,monospace;font-size:.78rem;display:flex}.keyrow .kname{color:var(--ink)}.keyrow .kval{color:var(--accent);overflow-wrap:anywhere;text-align:right}.pill{border:1px solid var(--line);border-radius:999px;align-items:center;gap:.35rem;padding:.2rem .6rem;font-family:IBM Plex Mono,monospace;font-size:.8rem;display:inline-flex}.pill.good{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 45%, transparent);background:color-mix(in srgb, var(--ok) 12%, transparent)}.pill.bad{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 50%, transparent);background:color-mix(in srgb, var(--bad) 12%, transparent)}.pill.alarm{color:var(--bad);border-color:var(--bad);background:color-mix(in srgb, var(--bad) 18%, transparent);font-weight:700}.two{grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.8rem;display:grid}.card{border:1px solid var(--line);background:var(--panel-solid);border-radius:12px;padding:.8rem}.card.client{border-color:color-mix(in srgb, var(--client) 32%, var(--line))}.card.server{border-color:color-mix(in srgb, var(--server) 32%, var(--line))}.mono{word-break:break-all;color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:.8rem}.mono .hl{color:var(--accent)}.chain{gap:.5rem;margin-top:.8rem;display:grid}.cert{border:1px solid var(--line);background:var(--panel-solid);border-radius:12px;padding:.7rem .85rem}.cert .role{color:var(--accent);letter-spacing:.06em;font-family:IBM Plex Mono,monospace;font-size:.72rem}.cert .subject{margin:.15rem 0;font-weight:700}.chain-link{text-align:center;color:var(--muted);font-size:.9rem}.verdicts{flex-wrap:wrap;gap:.4rem;margin-top:.6rem;display:flex}.mitm-box{border:1px dashed color-mix(in srgb, var(--bad) 40%, var(--line));background:color-mix(in srgb, var(--bad) 5%, transparent);border-radius:12px;margin-top:.9rem;padding:.9rem}.mitm-box.blocked{border-style:solid;border-color:color-mix(in srgb, var(--ok) 45%, transparent);background:color-mix(in srgb, var(--ok) 6%, transparent)}.mitm-box ol{color:var(--muted);margin:.7rem 0 0;padding-left:1.2rem;font-size:.88rem;line-height:1.5}.schedule{gap:.35rem;margin-top:.8rem;display:grid}.kstage{border:1px solid var(--line);background:var(--code-bg);border-radius:8px;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;padding:.4rem .6rem;font-family:IBM Plex Mono,monospace;font-size:.78rem;display:grid}.kstage .tag{color:var(--muted)}.kstage .name{color:var(--ink)}.kstage .val{color:var(--accent);overflow-wrap:anywhere;text-align:right}.kstage.indent .name{padding-left:1.1rem;position:relative}.kstage.indent .name:before{content:"└─";color:var(--muted);position:absolute;left:0}.record-grid{gap:.5rem;margin-top:.8rem;display:grid}.field{gap:.2rem;display:grid}.field label{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-size:.76rem}.codebox{border:1px solid var(--line);background:var(--code-bg);color:var(--ink);white-space:pre;border-radius:8px;padding:.55rem .7rem;font-family:IBM Plex Mono,monospace;font-size:.8rem;overflow-x:auto}.codebox.ct{color:var(--appdata);white-space:pre-wrap;word-break:break-all}table{border-collapse:collapse;width:100%;margin-top:.8rem;font-size:.9rem}th,td{border-bottom:1px solid var(--line);text-align:left;vertical-align:top;padding:.5rem .55rem}th{color:var(--accent);font-size:.82rem}td.yes{color:var(--ok)}td.no{color:var(--bad)}.takeaways{color:var(--muted);margin:.6rem 0 0;padding-left:1.1rem;line-height:1.6}.scripture-footer{text-align:center;border-top:1px solid var(--line);color:var(--muted);margin-top:2rem;padding:2rem 1rem;font-size:.85rem;line-height:1.9}.scripture-footer a{color:var(--accent)}.related{margin-bottom:.6rem}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=860px){.sim,.pillars{grid-template-columns:1fr}}@media (width<=640px){#app{width:calc(100% - 1rem)}.hero,.panel{padding:.85rem}.two{grid-template-columns:1fr}.progress{margin-left:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}