@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap";:root{--bg0:#0b0f17;--bg1:#121a28;--panel:#0f1622;--ink:#d9e1ef;--muted:#9fb2cc;--client:#00d4ff;--server:#f0a;--wire:gold;--hybrid:#0f8;--x25519:#4a90e2;--mlkem:#9d4edd;--warn:#fa0;--danger:#ff5a5a;--line:#223047;--code-bg:#0a111c}:root[data-theme=light]{--bg0:#eef2f8;--bg1:#dbe4f1;--panel:#fff;--ink:#15202e;--muted:#4b5a6e;--client:#0072a8;--server:#b0006a;--wire:#7a5d00;--hybrid:#0b7a4d;--x25519:#2456a0;--mlkem:#7330a8;--warn:#985700;--danger:#bf2620;--line:#c5d0de;--code-bg:#f4f7fb}:root[data-theme=light] .exhibit{background:#ffffffeb}:root[data-theme=light] .panel{background:#f6f9fd}:root[data-theme=light] .btn,:root[data-theme=light] .chip{background:#eef3fa}:root[data-theme=light] .wire-block .mlkem,:root[data-theme=light] .mlkem.active{color:var(--mlkem)}:root[data-theme=light] .x25519.active{color:var(--x25519)}*{box-sizing:border-box}html{background-color:var(--bg0);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{color:var(--ink);background-color:var(--bg0);background-image:radial-gradient(circle at 15% 15%, #00d4ff33, transparent 35%), radial-gradient(circle at 85% 8%, #ff00aa2e, transparent 30%), linear-gradient(160deg, var(--bg0), var(--bg1));min-height:100svh;margin:0;font-family:Space Grotesk,sans-serif}#app{width:min(1200px,100% - 2rem);margin:1rem auto 3rem}.shell{gap:1rem;animation:.5s fade-in;display:grid}h1,h2,h3,h4{margin:0}.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;opacity:.85;color:var(--ink);margin:.4rem 0 0;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(--client) 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(--muted);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%}}.hero-controls{margin:0 0 .25rem}.controls{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.btn,.chip{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#172235;border-radius:999px;padding:.45rem .8rem;font-family:IBM Plex Mono,monospace;font-size:.85rem}.btn:hover,.chip:hover,.chip.active{border-color:var(--wire);box-shadow:inset 0 0 0 1px #ffd70033}.btn:focus-visible,.chip:focus-visible,.toggle input:focus-visible{outline:2px solid var(--wire);outline-offset:2px}.toggle{color:var(--muted);align-items:center;gap:.4rem;display:flex}.exhibit{border:1px solid var(--line);background:#0a111cd6;border-radius:16px;padding:1rem}.two-col{grid-template-columns:1fr 220px 1fr;align-items:stretch;gap:.8rem;display:grid}.panel{border:1px solid var(--line);background:#131e2ed9;border-radius:14px;padding:1rem}.panel h2{margin-bottom:.35rem}.panel.client{border-color:color-mix(in oklab, var(--client) 30%, var(--line))}.panel.server{border-color:color-mix(in oklab, var(--server) 30%, var(--line))}.wire-lane{flex-direction:column;justify-content:center;gap:.8rem;display:flex}.arrow{text-align:center;opacity:.35;background:#ffd70014;border:1px dashed #ffd7008c;border-radius:999px;padding:.4rem .65rem;font-family:IBM Plex Mono,monospace;font-size:.78rem}.arrow.active{opacity:1;animation:1s infinite pulse}.arrow.reverse:before{content:"< "}.arrow:not(.reverse):after{content:" >"}.step-title{margin:0;font-weight:700}.facts{color:var(--muted);margin:.65rem 0 0;line-height:1.45}table{border-collapse:collapse;width:100%;margin-top:.7rem}th,td{border-bottom:1px solid var(--line);text-align:left;padding:.5rem}caption{text-align:left;color:var(--muted);margin-bottom:.35rem;font-size:.88rem}.ok{color:var(--hybrid)}.bad{color:var(--danger)}.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-top:.65rem;display:grid}.metric{border:1px solid var(--line);border-radius:12px;gap:.2rem;padding:.7rem;display:grid}.metric span{color:var(--muted);font-size:.84rem}.metric strong{font-size:1.08rem}.metric em{color:var(--warn);font-size:.85rem;font-style:normal}.inspector-toggle{flex-wrap:wrap;gap:.4rem;display:flex}.wire-block{border:1px solid var(--line);background:var(--code-bg);border-radius:10px;max-height:280px;margin-top:.65rem;padding:.75rem;font-family:IBM Plex Mono,monospace;font-size:.8rem;line-height:1.6;overflow:auto}.wire-block .group{color:var(--wire)}.wire-block .x25519{color:var(--x25519)}.wire-block .mlkem{color:#c79bff}.group.active{color:var(--wire);background:#ffd7003b}.x25519.active{color:#8fc0ff;background:#4a90e240}.mlkem.active{color:#d7b8ff;background:#9d4edd40}.wire-caption{color:var(--muted);margin:.6rem 0 0;font-family:IBM Plex Mono,monospace;font-size:.8rem}.metric-note{color:var(--muted);margin:.7rem 0 0;font-size:.84rem;line-height:1.45}.banner{background:#00ff8814;border:1px solid #00ff8840;border-radius:10px;padding:.65rem}.grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:.8rem;display:grid}.footnote code{color:var(--hybrid);font-family:IBM Plex Mono,monospace}.site-footer{border-top:1px solid var(--line);text-align:center;color:var(--muted);margin-top:3rem;padding:2rem 1rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.9}.site-footer-row{margin-top:.5rem}.site-footer a{color:var(--hybrid);text-decoration:underline}.site-footer a:hover,.site-footer a:focus-visible{color:var(--ink)}.site-footer-verse{color:var(--muted);margin-top:.75rem}.term{border-bottom:1px dotted var(--muted);cursor:help;font-style:normal;text-decoration:none}.term:focus-visible{outline:2px solid var(--wire);outline-offset:2px;border-radius:3px}.intro p{color:var(--ink);line-height:1.55}.glossary{border-top:1px solid var(--line);flex-wrap:wrap;gap:.5rem 1rem;margin-top:.8rem;padding-top:.7rem;font-family:IBM Plex Mono,monospace;font-size:.82rem;display:flex}.step-caption{color:var(--muted);margin:.4rem 0 0;line-height:1.5}.dot{vertical-align:baseline;border-radius:50%;width:.6rem;height:.6rem;margin-right:.4rem;display:inline-block}.dot-x25519{background:var(--x25519)}.dot-mlkem{background:var(--mlkem)}.secret-match{flex-wrap:wrap;align-items:center;gap:.8rem;margin:.8rem 0;display:flex}.secret-side{border:1px solid var(--line);background:var(--code-bg);border-radius:10px;flex:10rem;gap:.25rem;padding:.6rem .7rem;display:grid}.secret-who{color:var(--muted);font-size:.78rem}.secret-side code{word-break:break-all;font-family:IBM Plex Mono,monospace;font-size:.82rem}.secret-eq{white-space:nowrap;font-family:IBM Plex Mono,monospace;font-size:.9rem;font-weight:700}.hybrid-flow{justify-items:center;gap:.5rem;margin:1rem 0 .5rem;display:grid}.hybrid-inputs{flex-wrap:wrap;justify-content:center;align-items:stretch;gap:.6rem;display:flex}.capsule{border:1px solid var(--line);background:var(--code-bg);border-radius:12px;gap:.25rem;min-width:12rem;padding:.6rem .75rem;display:grid}.capsule-title{color:var(--muted);font-size:.8rem}.capsule-hex{word-break:break-all;color:var(--ink);font-family:IBM Plex Mono,monospace;font-size:.82rem}.capsule-len{color:var(--muted);font-size:.74rem}.capsule-x25519{border-left:4px solid var(--x25519)}.capsule-mlkem{border-left:4px solid var(--mlkem)}.capsule-hybrid{border-left:4px solid var(--hybrid);min-width:min(100%,22rem)}.capsule-traffic{border-left:4px solid var(--client)}.concat-op{color:var(--muted);align-self:center;font-family:IBM Plex Mono,monospace;font-size:1.1rem;font-weight:700}.flow-down{color:var(--muted);justify-items:center;gap:.1rem;display:grid}.flow-label{font-family:IBM Plex Mono,monospace;font-size:.76rem}.flow-arrow{color:var(--hybrid);font-size:1.1rem;line-height:1}.hkdf-box{border:1px solid var(--line);background:color-mix(in oklab, var(--hybrid) 6%, var(--code-bg));border-radius:12px;gap:.4rem;width:min(100%,30rem);padding:.7rem .85rem;display:grid}.hkdf-title{color:var(--ink);font-size:.82rem}.hkdf-stage{color:var(--muted);justify-content:space-between;align-items:baseline;gap:.8rem;font-size:.82rem;display:flex}.hkdf-stage code{color:var(--ink);word-break:break-all;font-family:IBM Plex Mono,monospace}.traffic-out{flex-wrap:wrap;justify-content:center;gap:.6rem;width:100%;display:flex}.traffic-out .capsule{flex:14rem}.mtu{gap:.55rem;margin-top:1rem;display:grid;position:relative}.mtu-track{border:1px solid var(--line);background:var(--code-bg);border-radius:8px;align-items:center;height:1.9rem;display:flex;position:relative;overflow:hidden}.mtu-fill{border-radius:7px 0 0 7px;position:absolute;top:0;bottom:0;left:0}.mtu-fill.classical{background:color-mix(in oklab, var(--client) 45%, transparent)}.mtu-fill.hybrid{background:color-mix(in oklab, var(--mlkem) 45%, transparent)}.mtu-bar-label{z-index:1;color:var(--ink);padding-left:.6rem;font-family:IBM Plex Mono,monospace;font-size:.78rem;position:relative}.mtu-boundary{border-left:2px dashed var(--warn);color:var(--warn);padding-left:.4rem;font-family:IBM Plex Mono,monospace;font-size:.76rem}.nowrap{white-space:nowrap}@keyframes pulse{0%{transform:translate(0);box-shadow:0 0 #ffd70033}50%{transform:translate(4px);box-shadow:0 0 22px #ffd70047}to{transform:translate(0);box-shadow:0 0 #ffd70033}}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=980px){.two-col{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2{grid-template-columns:1fr}}@media (width<=640px){#app{width:calc(100% - 1rem);margin-top:.5rem}.exhibit{padding:.8rem}.metrics{grid-template-columns:1fr}.wire-block{font-size:.73rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}