@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}*{box-sizing:border-box}body{color:var(--ink);background: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}.hero{border:1px solid var(--line);background:linear-gradient(145deg,#122134d9,#0a121eeb);border-radius:18px;padding:1.5rem;box-shadow:0 14px 35px #02081073}.kicker{color:var(--wire);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.8rem}h1,h2,h3,h4{margin:0}h1{margin-top:.35rem;font-size:clamp(1.8rem,3.3vw,3rem)}.subtitle{color:var(--muted);max-width:75ch;margin-top:.5rem}.controls{flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1rem;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:#0a111c;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}.group.active{color:var(--wire);background:#ffd7003b}.x25519.active{color:var(--x25519);background:#4a90e233}.mlkem.active{color:#d7b8ff;background:#9d4edd33}.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}@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}.hero,.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}}