@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:#6ea6f7;--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:#1a53bd;--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:#0a6b43;--bad:#b41f2e;--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)}.cl-hero{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:clamp(1rem,4vw,3rem);margin:clamp(1rem,3vw,2rem) 0 1.5rem;display:flex}.cl-hero-main{flex:22rem;min-width:min(100%,20rem)}.cl-hero-title{letter-spacing:.01em;color:var(--ink);margin:0;font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:700;line-height:1.1}.cl-hero-sub{letter-spacing:.01em;color:var(--accent);margin:.4rem 0 0;font-family:IBM Plex Mono,monospace;font-size:clamp(.9rem,1.6vw,1.05rem)}.cl-hero-desc{color:var(--muted);max-width:60ch;margin:.55rem 0 0;font-size:1rem;line-height:1.5}.cl-hero-why{border:1px solid var(--line);background:color-mix(in oklab,var(--accent) 6%,transparent);border-radius:10px;flex:0 min(40%,26rem);min-width:min(100%,15rem);padding:.85rem 1.05rem}.cl-hero-why-label{letter-spacing:.14em;color:var(--accent);font-size:.68rem;font-weight:700;display:block}.cl-hero-why-text{color:var(--ink);margin:.35rem 0 0;font-size:.95rem;line-height:1.5}@media (width<=640px){.cl-hero{flex-direction:column}.cl-hero-why{flex-basis:auto;width:100%}.cl-hero-main{flex-basis:auto;min-width:0}}.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);min-height:44px;color:var(--ink);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:.5rem .95rem;font-family:IBM Plex Mono,monospace;font-size:.85rem;transition:border-color .15s,background .15s,transform 50ms;display:inline-flex}.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 dashed var(--line);cursor:pointer;text-align:left;font:inherit;color:inherit;background:0 0;border-radius:10px;grid-template-columns:1fr auto 1fr;align-items:center;gap:.3rem;width:100%;padding:.45rem .6rem;transition:background .18s,border-color .18s,transform 50ms;display:grid}.msg.seen{background:var(--panel-solid);border-style:solid}.msg.current{background:var(--panel-solid);border-style:solid;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset, 0 6px 18px #5b9cf62e}.msg:hover{background:color-mix(in srgb, var(--accent) 12%, var(--panel-solid))}.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}.fault-panel{border:1px solid var(--line);background:color-mix(in srgb, var(--ok) 4%, transparent);border-radius:12px;margin-top:1rem;padding:.9rem}.fault-panel.faulted{border-style:dashed;border-color:color-mix(in srgb, var(--bad) 40%, var(--line));background:color-mix(in srgb, var(--bad) 5%, transparent)}.fault-panel h3{margin:0 0 .4rem;font-size:1rem}.fault-buttons{flex-wrap:wrap;gap:.5rem;margin-top:.6rem;display:flex}.fault-detail{color:var(--muted);overflow-wrap:anywhere;margin:.6rem 0 0;font-size:.8rem}.fault-note{margin-top:.7rem}.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}.mitm-choose{margin-top:.9rem}.mitm-buttons{flex-wrap:wrap;gap:.5rem;margin-top:.6rem;display:flex}.mitm-checks{gap:.35rem;margin:.8rem 0 0;padding:0;list-style:none;display:grid}.mitm-checks li{border:1px solid var(--line);background:var(--panel-solid);border-radius:9px;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem;padding:.4rem .6rem;font-size:.84rem;display:flex}.mc-label{color:var(--ink)}.mc-val{letter-spacing:.05em;font-family:IBM Plex Mono,monospace;font-weight:600}.mc-neutral{color:var(--muted)}.mc-good{color:var(--ok)}.mc-bad{color:var(--bad)}.scope-cards{grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.9rem;display:grid}.scope-card{border:1px solid var(--line);background:var(--panel-solid);border-radius:12px;padding:.8rem .9rem}.scope-card h3{margin:0 0 .5rem;font-size:.95rem}.scope-card ul{color:var(--muted);margin:0;padding-left:1.1rem;font-size:.84rem;line-height:1.5}.scope-card li+li{margin-top:.4rem}@media (width<=860px){.scope-cards{grid-template-columns:1fr}}.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}.term{border-bottom:1px dotted var(--accent);cursor:help;color:var(--ink);font-weight:600}.detail h4 .term{border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);width:1.15em;height:1.15em;color:var(--accent);vertical-align:middle;border-bottom-style:solid;border-radius:50%;place-items:center;margin-left:.3rem;font-size:.72em;display:inline-grid}.term:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.kx-op{color:var(--muted);margin-top:.5rem;font-size:.75rem}.masked{color:var(--muted);letter-spacing:.08em}.secret-bytes{border:1px solid var(--line);background:var(--code-bg);border-radius:8px;flex-wrap:wrap;gap:2px;margin-top:.3rem;padding:.4rem;font-family:IBM Plex Mono,monospace;font-size:.72rem;display:flex}.byte{color:var(--ink);border-radius:3px;padding:.04rem .16rem}.byte.match{background:color-mix(in srgb, var(--ok) 22%, transparent);border-bottom:2px solid var(--ok);font-weight:700}.byte.diff{background:color-mix(in srgb, var(--bad) 18%, transparent);border-bottom:2px solid var(--bad)}.kx-note{margin-top:.7rem}.tx-chip{border:1px solid var(--line);background:var(--code-bg);border-radius:8px;flex-wrap:wrap;align-items:baseline;gap:.4rem .6rem;margin-top:.4rem;padding:.4rem .6rem;font-family:IBM Plex Mono,monospace;font-size:.78rem;display:flex}.tx-chip.binding{border-color:color-mix(in srgb, var(--accent) 55%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset}.tx-chip .tx-label{color:var(--muted)}.tx-chip .tx-val{color:var(--accent);overflow-wrap:anywhere}.tx-bind{color:var(--accent);margin-top:.35rem;font-family:IBM Plex Mono,monospace;font-size:.74rem;font-weight:700;display:inline-block}.tx-compare{border:1px solid var(--line);background:var(--code-bg);border-radius:10px;margin-top:.8rem;padding:.7rem .8rem}.tx-cmp-title{color:var(--ink);margin-bottom:.5rem;font-size:.82rem}.tx-cmp-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.3rem;font-family:IBM Plex Mono,monospace;font-size:.76rem;display:flex}.tx-cmp-tag{min-width:11rem}.tx-cmp-tag.good-tag{color:var(--ok)}.tx-cmp-tag.bad-tag{color:var(--bad)}.tx-cmp-hash{color:var(--accent);overflow-wrap:anywhere}.tx-cmp-note{margin:.6rem 0 0}.tx-cmp-note .pill.good{background:var(--panel-solid);border-color:color-mix(in srgb, var(--ok) 55%, transparent)}.deriv{border:1px solid var(--line);background:var(--panel-solid);border-radius:12px;margin-top:.9rem}.deriv>summary{cursor:pointer;color:var(--accent);padding:.7rem .85rem;font-family:IBM Plex Mono,monospace;font-size:.85rem;font-weight:500}.deriv>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.deriv[open]>summary{border-bottom:1px solid var(--line)}.deriv-body{padding:.4rem .85rem .9rem}.deriv-eq{border:1px solid var(--line);background:var(--code-bg);border-radius:10px;margin-top:.7rem;padding:.7rem .8rem;font-family:IBM Plex Mono,monospace}.deriv-fn{color:var(--accent);font-size:.82rem;font-weight:700}.deriv-args{gap:.4rem;margin:.4rem 0 .4rem 1rem;display:grid}.deriv-arg{grid-template-columns:5.5rem 1fr;align-items:start;gap:.5rem;font-size:.76rem;display:grid}.deriv-k{color:var(--muted)}.deriv-v{color:var(--ink);overflow-wrap:anywhere}.deriv-arrow{text-align:center;color:var(--accent);margin:.4rem 0;font-family:IBM Plex Mono,monospace;font-size:.78rem}.deriv-out{border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);background:color-mix(in srgb, var(--accent) 8%, transparent);border-radius:8px;grid-template-columns:1fr;gap:.2rem;padding:.5rem .65rem;font-family:IBM Plex Mono,monospace;font-size:.78rem;display:grid}.deriv-bar{color:var(--muted);align-items:center;gap:.5rem;margin:.4rem 0;font-family:IBM Plex Mono,monospace;font-size:.72rem;display:flex}.deriv-bar-label{min-width:6.5rem}.deriv-bar-track{background:var(--line);border-radius:999px;flex:1;height:8px;overflow:hidden}.deriv-bar-fill{background:var(--accent);height:100%;display:block}.deriv-avalanche{margin-top:.7rem}.wire{position:relative;overflow:visible}.packet{white-space:nowrap;border:1px solid var(--line);background:var(--panel-solid);opacity:0;pointer-events:none;border-radius:6px;padding:.1rem .4rem;font-family:IBM Plex Mono,monospace;font-size:.62rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.9)}.packet.plaintext{color:var(--muted);border-color:var(--muted)}.packet.handshake{color:var(--handshake);border-color:color-mix(in srgb, var(--handshake) 55%, transparent);background:color-mix(in srgb, var(--handshake) 12%, var(--panel-solid))}.packet.application{color:var(--appdata);border-color:color-mix(in srgb, var(--appdata) 55%, transparent);background:color-mix(in srgb, var(--appdata) 12%, var(--panel-solid))}.packet.fly[data-dir=server]{animation:.64s both fly-to-server}.packet.fly[data-dir=client]{animation:.64s both fly-to-client}@keyframes fly-to-server{0%{opacity:0;left:0;transform:translate(-50%,-50%)scale(.85)}12%{opacity:1}88%{opacity:1}to{opacity:0;left:100%;transform:translate(-50%,-50%)scale(.85)}}@keyframes fly-to-client{0%{opacity:0;left:100%;transform:translate(-50%,-50%)scale(.85)}12%{opacity:1}88%{opacity:1}to{opacity:0;left:0;transform:translate(-50%,-50%)scale(.85)}}.lane-heads .c,.lane-heads .s{border-radius:6px;padding:.05rem .35rem;transition:box-shadow .2s}.lane-heads .flash{box-shadow:0 0 0 2px var(--accent)}@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)}.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}}