:root{color:#17263c;font-synthesis:none;--canvas:#f5f8f6;--panel:#ffffffe0;--panel-solid:#fff;--line:#dce6e1;--line-strong:#c7d7d0;--text:#17263c;--muted:#64758a;--green:#0d9f6e;--green-dark:#087653;--green-soft:#e5f7f0;--amber:#c47a12;--amber-soft:#fff5dd;--red:#d94a57;--red-soft:#fff0f1;--blue-soft:#edf4ff;--shadow:0 12px 36px #1e372d14;--shadow-hover:0 18px 48px #1e503e24;background:#f5f8f6;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--canvas);min-width:320px;min-height:100vh;margin:0}body:before,body:after{content:"";z-index:-1;filter:blur(12px);pointer-events:none;opacity:.65;border-radius:999px;position:fixed}body:before{background:radial-gradient(circle,#63deb147,#63deb100 70%);width:440px;height:440px;animation:11s ease-in-out infinite alternate ambientFloat;top:-130px;right:-150px}body:after{background:radial-gradient(circle,#78a9ff2e,#78a9ff00 70%);width:380px;height:380px;animation:14s ease-in-out -3s infinite alternate-reverse ambientFloat;bottom:-220px;left:12%}button,a{font:inherit}button:focus-visible,a:focus-visible{outline-offset:2px;outline:3px solid #0d9f6e3d}.shell{isolation:isolate;grid-template-columns:250px 1fr;min-height:100vh;display:grid}aside{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:5;background:#fafcfbdb;border-right:1px solid #c7d7d0e6;flex-direction:column;height:100vh;padding:26px 20px;display:flex;position:sticky;top:0;box-shadow:10px 0 36px #2645390a}.brand{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:0 8px 28px;display:flex}.brand div:last-child{flex-direction:column;gap:2px;display:flex}.brand strong{color:var(--text);letter-spacing:-.01em}.brand span,.connection small{color:var(--muted);font-size:12px}.mark{color:#fff;background:linear-gradient(145deg,#16b982,#087653);border-radius:12px;place-items:center;width:38px;height:38px;font:700 15px ui-monospace,monospace;animation:.7s cubic-bezier(.22,1,.36,1) both markIn;display:grid;box-shadow:0 8px 18px #0d9f6e38}nav{flex-direction:column;gap:7px;padding-top:25px;display:flex}nav a{color:var(--muted);border:1px solid #0000;border-radius:11px;padding:11px 13px;font-size:14px;font-weight:550;text-decoration:none;transition:color .22s,background .22s,border-color .22s,transform .22s}nav a:hover{color:var(--green-dark);background:var(--green-soft);transform:translate(3px)}nav a.active{color:var(--green-dark);box-shadow:inset 3px 0 var(--green);background:#e9f8f2;border-color:#c8eadc}.connection{color:var(--green-dark);background:linear-gradient(145deg,#f4fcf8,#eaf8f2);border:1px solid #cce8dc;border-radius:14px;grid-template-columns:12px 1fr;gap:3px 7px;margin-top:auto;padding:14px;font-size:12px;display:grid;box-shadow:0 8px 24px #0d9f6e14}.connection i{background:var(--green);border-radius:50%;width:8px;height:8px;margin-top:4px;animation:2.3s infinite statusPulse;box-shadow:0 0 #0d9f6e66}.connection small{grid-column:2}.connection.recorded{color:#8c5a10;background:linear-gradient(145deg,#fffaf0,#fff5df);border-color:#ecd7a9;box-shadow:0 8px 24px #c47a1214}.connection.recorded i{background:var(--amber);box-shadow:none;animation:none}main{width:100%;max-width:1640px;margin:auto;padding:38px clamp(24px,4vw,66px) 30px}header{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px;animation:.6s ease-out both riseIn;display:flex}h1,h2,h3,p{margin-top:0}h1{color:#132239;letter-spacing:-.045em;margin-bottom:9px;font-size:clamp(30px,3vw,42px);line-height:1.06}h2{color:#1a2a40;letter-spacing:-.015em;margin:2px 0;font-size:18px}h3{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:24px;font-size:11px}.subtitle{color:var(--muted);margin:0;font-size:15px}.eyebrow{letter-spacing:.14em;color:#718398;margin-bottom:7px;font:700 10px ui-monospace,monospace}.header-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.badge,.mode,.decision{letter-spacing:.07em;border:1px solid;border-radius:999px;padding:7px 10px;font:700 10px ui-monospace,monospace}.badge{color:#9b620e;background:var(--amber-soft);border-color:#efd49f}.mode{text-transform:uppercase;color:var(--green-dark);background:var(--green-soft);border-color:#bce3d3}.metrics{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;display:grid}.metric{border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(145deg,#fffffff5,#f8fcfae6);border-radius:18px;flex-direction:column;gap:6px;padding:20px;transition:transform .25s,box-shadow .25s,border-color .25s;animation:.55s cubic-bezier(.22,1,.36,1) both riseIn;display:flex;position:relative;overflow:hidden}.metric:after{content:"";background:radial-gradient(circle,#1cb98429,#0000 68%);border-radius:50%;width:74px;height:74px;position:absolute;top:-25px;right:-25px}.metric:nth-child(2){animation-delay:70ms}.metric:nth-child(3){animation-delay:.14s}.metric:nth-child(4){animation-delay:.21s}.metric:hover{box-shadow:var(--shadow-hover);border-color:#bddfd1;transform:translateY(-4px)}.metric span,.metric small{color:var(--muted);font-size:11px}.metric strong{color:#14243a;letter-spacing:-.04em;font:700 28px ui-monospace,monospace}.metric small{font-size:10px}.alert{background:linear-gradient(100deg,#fff4f5,snow);border:1px solid #f0c9cd;border-radius:16px;align-items:center;gap:14px;margin-bottom:16px;padding:15px 17px;animation:.55s .2s both riseIn;display:flex;box-shadow:0 9px 26px #a73c4612}.alert p{color:#bc515b;margin-bottom:3px}.alert strong{color:#6d2b33;font-size:13px}.alert button{color:#a43d47;cursor:pointer;background:#fff;border:1px solid #e9bfc3;border-radius:10px;margin-left:auto;padding:8px 12px;transition:transform .2s,background .2s}.alert button:hover{background:#fff6f7;transform:translateY(-2px)}.risk-dot{background:#8795a6;border-radius:50%;flex:none;width:8px;height:8px;display:inline-block}.risk-dot.none,.risk-dot.low{background:var(--green)}.risk-dot.medium,.risk-dot.high{background:var(--amber)}.risk-dot.critical{background:var(--red);box-shadow:0 0 0 4px #fbdcdf}.panel{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:0;box-shadow:var(--shadow);border-radius:18px;transition:box-shadow .25s,border-color .25s;animation:.58s .24s both riseIn;overflow:hidden}.panel:hover{box-shadow:var(--shadow-hover);border-color:var(--line-strong)}.panel-head{border-bottom:1px solid var(--line);background:#fbfdfcb8;justify-content:space-between;align-items:center;min-height:70px;padding:16px 19px;display:flex}.panel-head p{margin-bottom:3px}.panel-head code{color:var(--muted);background:#eef3f1;border-radius:7px;padding:5px 8px;font-size:10px}.attack-lab{margin-bottom:16px}.lab-grid{grid-template-columns:1.5fr .7fr;display:grid}.scenario-list{border-right:1px solid var(--line);grid-template-columns:repeat(3,1fr);gap:9px;padding:12px;display:grid}.scenario-list button{min-height:96px;color:var(--text);text-align:left;cursor:pointer;background:#fbfdfc;border:1px solid #dfe8e4;border-radius:13px;flex-direction:column;gap:5px;padding:13px;transition:transform .22s,border-color .22s,background .22s,box-shadow .22s;animation:.45s both cardIn;display:flex}.scenario-list button:nth-child(3n+2){animation-delay:50ms}.scenario-list button:nth-child(3n){animation-delay:.1s}.scenario-list button:hover{background:#f4fcf8;border-color:#9ed7c1;transform:translateY(-3px);box-shadow:0 10px 22px #0d9f6e1a}.scenario-list button:active{transform:translateY(-1px)scale(.99)}.scenario-list button:disabled{opacity:.6;cursor:wait}.scenario-list span,.scenario-list small,.lab-result small{color:var(--muted);font-size:9px}.scenario-list strong{color:#203149;font-size:12px}.lab-result{background:linear-gradient(145deg,#f4fbf8,#eef8f4);flex-direction:column;justify-content:center;padding:24px;display:flex;position:relative;overflow:hidden}.lab-result:after{content:"";background:#41c4941a;border-radius:50%;width:180px;height:180px;position:absolute;bottom:-75px;right:-70px}.lab-result>*{z-index:1;position:relative}.lab-result>strong{margin-bottom:12px;font:750 30px ui-monospace,monospace;animation:.38s cubic-bezier(.22,1,.36,1) both resultPop}.lab-result .matched{color:var(--green-dark)}.lab-result .mismatch{color:var(--red)}.lab-result p:not(.eyebrow){color:#53677d;font-size:12px;line-height:1.55}.workspace{grid-template-columns:minmax(520px,1.5fr) minmax(300px,1fr);gap:16px;display:grid}.events{padding:6px}.event{width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #e8eeeb;border-radius:10px;grid-template-columns:10px 67px minmax(170px,1fr) 62px 45px;align-items:center;gap:10px;padding:13px 10px;transition:background .2s,transform .2s,box-shadow .2s;display:grid}.event:hover{background:#f4f9f6;transform:translate(2px)}.event.selected{box-shadow:inset 3px 0 var(--green);background:#ecf8f3}.event-time,.latency{color:var(--muted);font:10px ui-monospace,monospace}.event-copy{flex-direction:column;gap:4px;min-width:0;display:flex}.event-copy strong{color:#273a52;font:12px ui-monospace,monospace}.event-copy small{white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:11px;overflow:hidden}.decision{text-align:center;padding:4px 7px}.decision.allow{color:var(--green-dark);background:var(--green-soft);border-color:#9cd8c0}.decision.block,.decision.quarantine{color:#bb3542;background:var(--red-soft);border-color:#efbbc0}.decision.ask_user,.decision.redact{color:#9f650e;background:var(--amber-soft);border-color:#ebd099}.detail-body{padding:19px}.detail-grid{border:1px solid var(--line);background:#fbfdfc;border-radius:13px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.detail-grid label{color:var(--muted);border-bottom:1px solid var(--line);flex-direction:column;gap:5px;padding:12px;font-size:10px;display:flex}.detail-grid label:nth-child(odd){border-right:1px solid var(--line)}.detail-grid label:nth-last-child(-n+2){border-bottom:0}.detail-grid strong{color:#24364e;text-transform:uppercase;font:12px ui-monospace,monospace}.detail-grid strong.critical{color:var(--red)}.detail-body p{color:#53677d;font-size:13px;line-height:1.58}.detail-body code{color:#60738a;word-break:break-all;background:#eef3f1;border-radius:6px;padding:4px 7px;font-size:11px}.chain{border-top:1px solid var(--line);color:var(--muted);margin-top:16px;padding-top:14px;font-size:10px}.chain i{background:var(--green);border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}.policy-panel{margin-top:16px}.policy-body{grid-template-columns:minmax(260px,.7fr) minmax(420px,1.3fr);display:grid}.policy-body>div{border-right:1px solid var(--line);gap:12px;padding:19px;display:grid}.policy-body label{color:var(--muted);flex-direction:column;gap:5px;font-size:10px;display:flex}.policy-body strong{color:#2b4057;font:12px ui-monospace,monospace}.policy-body pre{color:#52677e;white-space:pre-wrap;background:#f2f6f4;max-height:280px;margin:0;padding:19px;font:11px/1.58 ui-monospace,monospace;overflow:auto}.downloads{margin-top:16px}.downloads>div:last-child{grid-template-columns:repeat(4,1fr);gap:9px;padding:13px;display:grid}.downloads a{color:#2c4057;border:1px solid var(--line);background:#fbfdfc;border-radius:11px;justify-content:space-between;padding:14px;font-size:11px;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex}.downloads a:hover{border-color:#9cd8c0;transform:translateY(-3px);box-shadow:0 9px 20px #0d9f6e17}.downloads a span{color:var(--green);font-size:15px;transition:transform .2s}.downloads a:hover span{transform:translateY(2px)}footer{color:#7c8c9e;justify-content:space-between;margin-top:20px;padding-bottom:8px;font-size:10px;display:flex}.center{place-items:center;min-height:100vh;display:grid}.empty{border:1px solid var(--line);max-width:440px;box-shadow:var(--shadow);background:#fff;border-radius:18px;padding:34px}.loading{color:var(--muted);animation:1.4s ease-in-out infinite softPulse}@keyframes riseIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes cardIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes markIn{0%{opacity:0;transform:rotate(-10deg)scale(.7)}to{opacity:1;transform:rotate(0)scale(1)}}@keyframes resultPop{0%{opacity:0;transform:translateY(8px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes statusPulse{0%{box-shadow:0 0 #0d9f6e6b}70%{box-shadow:0 0 0 7px #0d9f6e00}to{box-shadow:0 0 #0d9f6e00}}@keyframes ambientFloat{0%{transform:translate(0,0)scale(1)}to{transform:translate(-28px,24px)scale(1.08)}}@keyframes softPulse{50%{opacity:.48}}@media (width<=1000px){.shell{grid-template-columns:1fr}aside{display:none}.workspace{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.policy-body,.lab-grid{grid-template-columns:1fr}.policy-body>div,.scenario-list{border-right:0;border-bottom:1px solid var(--line)}.scenario-list,.downloads>div:last-child{grid-template-columns:repeat(2,1fr)}}@media (width<=620px){main{padding:24px 14px}header{flex-direction:column}.header-actions{justify-content:flex-start}.metrics,.scenario-list,.downloads>div:last-child{grid-template-columns:1fr}.event{grid-template-columns:10px 55px 1fr 55px}.latency{display:none}.workspace{display:block}.detail{margin-top:16px}footer{flex-direction:column;gap:5px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}