@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap";:root{--bg:#090c10;--bg2:#0c1118;--panel:rgba(12,17,24,.86);--border:#1c2733;--border2:#243244;--text:#dfe9f2;--muted:#9dadbd;--dim:#7c93a8;--dim2:#8fa3b6;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--sans:"Inter",ui-sans-serif,system-ui,sans-serif;--app:#7dd3fc;--storage:#c4b5fd;--tls:#f0abfc;--transport:#fbbf24;--network:#4ade80;--link:#fb923c;--physical:#f87171;--control:#60a5fa;--radius:14px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skiplink{position:absolute;left:-9999px;top:0;background:var(--transport);color:#1a1000;font-family:var(--mono);font-weight:800;font-size:12px;padding:10px 16px;border-radius:0 0 8px;z-index:100}.skiplink:focus{left:0}:focus-visible{outline:2px solid var(--transport);outline-offset:2px}abbr.term{text-decoration:underline dotted;text-decoration-color:var(--dim);cursor:help}body{color:var(--text);font-family:var(--sans);background:radial-gradient(ellipse 900px 500px at 15% -10%,rgba(96,165,250,.1),transparent 60%),radial-gradient(ellipse 900px 500px at 85% 0%,rgba(240,171,252,.08),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 34px),var(--bg);min-height:100vh}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.app{max-width:1440px;margin:0 auto;padding:0 28px 90px}.topbar{min-height:88px;padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--border)}.brand{font-family:var(--mono);font-weight:800;font-size:20px;letter-spacing:1px}.brand span{color:var(--transport)}.tag{font-family:var(--mono);font-size:11px;letter-spacing:.3px;color:var(--dim);margin-top:4px}.modebadge{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:#a7f3c8;border:1px solid #1f4a34;background:#4ade800f;border-radius:999px;padding:9px 14px;display:flex;align-items:center;gap:8px;text-align:right}.modebadge i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;flex-shrink:0}.modebadge small{display:block;font-size:9px;letter-spacing:.4px;color:var(--dim);font-weight:400;margin-top:2px}.viewnav{display:flex;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:4px}.viewnav button{background:none;border:0;border-radius:7px;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:1px;padding:9px 16px;display:flex;flex-direction:column;align-items:center;gap:2px}.viewnav button small{font-size:9px;color:var(--dim2);font-weight:400;letter-spacing:.2px}.viewnav button.on{background:#7dd3fc1a;color:#fff;box-shadow:inset 0 0 0 1px var(--app)}.viewnav button.on small{color:#9fdcfb}.hero{padding:56px 0 30px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:end}.orientation{font-family:var(--mono);font-size:11px;letter-spacing:.4px;color:var(--muted);margin-bottom:10px}.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--transport)}.hero h1{font-family:var(--mono);font-size:clamp(34px,4.4vw,60px);line-height:1.02;letter-spacing:-1.5px;margin:14px 0 18px;font-weight:700}.hero h1 span{color:#fff;background:linear-gradient(90deg,#7dd3fc,#c4b5fd 45%,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{max-width:640px;color:var(--muted);line-height:1.7;font-size:14.5px}.quickpaths{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap;align-items:center}.quickpathslabel,.exampleslabel{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--dim2);width:100%}.quickpathchip{background:var(--bg2);border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:11px;padding:8px 12px;border-radius:8px;text-align:left}.quickpathchip small{display:block;color:var(--dim2);font-size:9.5px;margin-top:3px;font-weight:400}.quickpathchip:hover{border-color:var(--transport)}.examples{margin-top:14px}.examplecards{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}.examplecard{background:var(--bg2);border:1px solid var(--border);color:var(--muted);font-family:var(--mono);font-size:11px;padding:9px 12px;border-radius:8px;text-align:left;min-width:150px}.examplecard b{display:block;color:var(--text);font-size:12px}.examplecard span{display:block;margin-top:4px;font-size:10px;color:var(--dim2)}.examplecard em{color:var(--transport);font-style:normal}.examplecard:hover{border-color:var(--transport);color:var(--text)}.examplecard.active{border-color:var(--transport);background:#fbbf2414}.onboarding{margin-top:20px;display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 14px}.onboarding ol{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}.onboarding li{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--text)}.onboarding li span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--transport);color:#1a1000;font-weight:800;font-size:10px;flex-shrink:0}.dismissbtn{margin-left:auto;background:none;border:0;color:var(--dim2);font-size:13px;padding:2px 6px}.dismissbtn:hover{color:var(--text)}.heroright{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.modeswitch{display:flex;gap:6px;width:100%}.modeswitch button{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--dim);text-align:left;transition:all .2s}.modeswitch button small{display:block;margin-top:4px;font-size:9px;letter-spacing:.2px;color:var(--dim);font-weight:400}.modeswitch button.on{border-color:var(--transport);color:#fff;background:#fbbf2414}.modeswitch button.on small{color:#d8b972}.urlbox{width:100%;display:flex;align-items:center;background:var(--bg2);border:2px solid var(--border2);padding:8px;border-radius:12px;box-shadow:0 20px 60px #00000059}.urlbox .scheme{color:var(--dim);font-family:var(--mono);padding-left:10px;font-size:15px}.urlbox input{flex:1;background:transparent;border:0;color:#fff;padding:14px 6px;font-size:16px;font-family:var(--mono);outline:0;min-width:0}.urlbox .runbtn{border:0;border-radius:8px;background:var(--transport);color:#1a1000;font-weight:800;font-family:var(--mono);font-size:13.5px;letter-spacing:.5px;padding:0 26px;height:52px;white-space:nowrap;box-shadow:0 0 0 4px #fbbf2424,0 10px 26px #fbbf2438}.urlbox .runbtn:hover:not(:disabled){filter:brightness(1.08)}.urlbox .runbtn:disabled{opacity:.55;cursor:default;box-shadow:none}.urlhelp{font-family:var(--mono);font-size:10.5px;color:var(--dim2);margin-top:2px;padding-left:4px}.urlhelp.error{color:#fca5a5}.skipbtn{background:none;border:0;color:var(--dim2);font-family:var(--mono);font-size:11px;text-decoration:underline}.stepbar{position:sticky;top:0;z-index:20;background:#0b121b;box-shadow:0 12px 30px #00000073;padding:0}.progresshead{display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--border)}.statuschip{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;color:var(--dim2);border:1px solid var(--border2);padding:4px 9px;border-radius:999px;white-space:nowrap}.statuschip.run{color:#4ade80;border-color:#1f4a34;background:#4ade8014}.statuschip.pause{color:var(--transport);border-color:#4a3a1c;background:#fbbf2414}.statuschip.done{color:#93e9ff;border-color:#1e3a4a;background:#93e9ff14}.progresstrack{flex:1;height:4px;background:var(--border);border-radius:3px;overflow:hidden}.progressfill{height:100%;background:linear-gradient(90deg,#7dd3fc,#fbbf24);transition:width .14s linear}.stepbarrow{display:flex;align-items:stretch;gap:0}.stepnav{flex:0 0 130px;background:var(--bg2);border:0;color:var(--text);font-family:var(--mono);font-size:11px;letter-spacing:1px;padding:16px 14px;text-align:left;border-right:1px solid var(--border)}.stepnav:disabled{opacity:.35;cursor:default}.stepnav.next{flex:0 0 240px;background:#fbbf2414;color:var(--transport);border-right:0;border-left:1px solid var(--border)}.stepnav.next small{display:block;margin-top:5px;color:#d8b972;font-size:10px;letter-spacing:.2px;font-weight:400;white-space:normal;line-height:1.4}.stepnav.done{flex:0 0 240px;background:#4ade8014;color:#4ade80;border-left:1px solid var(--border);border-right:0;text-align:center}.stepmid{flex:1;min-width:0;background:#0b121b;padding:14px 18px;display:flex;flex-direction:column;justify-content:center;gap:4px}.stepcount{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;color:var(--dim2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.restartlink{background:none;border:0;color:var(--dim2);font-family:var(--mono);font-size:9.5px;text-decoration:underline;padding:0}.kbdhint{color:var(--dim2);opacity:.85}.stepthis{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.advanced{padding:0;border-color:var(--border2)}.advanced summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-family:var(--mono);background:#fbbf240d;transition:background .15s,border-color .15s;border-left:3px solid var(--transport)}.advanced summary::-webkit-details-marker{display:none}.advanced summary:hover,.advanced summary:focus-visible{background:#fbbf241a}.advanced summary span{font-size:11.5px;letter-spacing:1.4px;color:var(--text);font-weight:700}.advanced summary small{font-size:10.5px;color:var(--dim2);font-weight:400}.advanced summary:after{content:"▾ show";margin-left:auto;color:#1a1000;background:var(--transport);border-radius:999px;padding:5px 11px;font-size:10px;font-weight:800;letter-spacing:.5px;flex-shrink:0}.advanced[open] summary:after{content:"▴ hide"}.advancedbody{padding:0 18px 18px;border-top:1px solid var(--border)}.corecontrols{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.togglegroup{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-top:12px}.togglegroup legend{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:#b9c9d8;padding:0 4px;display:block}.togglegroup legend small{display:block;color:var(--dim2);font-size:10px;letter-spacing:.2px;font-weight:400;margin-top:2px}.togglerow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.resetlink{margin-top:14px;background:none;border:0;color:var(--dim2);font-family:var(--mono);font-size:10.5px;text-decoration:underline}.control,.toggle{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-family:var(--mono)}.control{display:flex;gap:10px;align-items:center}.control small,.toggle small{font-size:10px;letter-spacing:1.1px;color:var(--dim2)}.control select{background:transparent;color:var(--text);border:0;outline:0;font-family:var(--mono);font-size:12px}.toggle{cursor:pointer;min-width:112px;text-align:left}.toggle span{display:block;font-size:11px;margin-top:4px;color:var(--dim2);font-weight:700}.toggle.on{border-color:#1f4a34}.toggle.on span{color:#4ade80}.toggle:disabled{opacity:.4;cursor:default}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 70px #00000047;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin-bottom:18px}.panelhead{min-height:60px;padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.panelhead b{display:block;font-size:10.5px;letter-spacing:1.6px;font-family:var(--mono);color:#b9c9d8}.panelhead small{display:block;margin-top:4px;font-size:10.5px;color:var(--dim);letter-spacing:.2px;font-weight:400}.counter{font-family:var(--mono);font-size:10.5px;color:var(--dim)}.livebtn{font-family:var(--mono);font-size:10px;color:#4ade80;background:#4ade8014;border:1px solid #1f4a34;padding:6px 10px;border-radius:7px}.network{position:relative;height:280px;background:linear-gradient(180deg,#141e2c59,#04080d0d);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}.networkinner{position:relative;width:100%;height:100%;min-width:820px}.swipehint{display:none;position:sticky;bottom:6px;left:50%;width:max-content;margin:0 auto;transform:translate(0);color:var(--dim);font-family:var(--mono);font-size:9px;letter-spacing:.6px;pointer-events:none;background:#090c10c7;padding:4px 8px;border:1px solid var(--border);border-radius:999px}.wiresvg{position:absolute;inset:0;width:100%;height:100%}.wiresvg .wire{fill:none;stroke:#26384c;stroke-width:.45;vector-effect:non-scaling-stroke}.wiresvg .branch{fill:none;stroke:#3a3350;stroke-width:.35;stroke-dasharray:.6 1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.8}.wiresvg .activeseg{fill:none;stroke-width:.7;stroke-linecap:round;stroke-dasharray:2.4 1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px currentColor);animation:flow .5s linear;opacity:.95}@keyframes flow{0%{stroke-dashoffset:8}to{stroke-dashoffset:0}}.node{position:absolute;transform:translate(-50%,-50%);width:118px;text-align:center;transition:filter .3s}.node.dns{width:110px}.nodeicon{margin:0 auto 8px;width:44px;height:44px;border:1px solid var(--border2);border-radius:12px;background:#0a1420;display:grid;place-items:center;color:#8fa3b8;font-size:19px;transition:all .35s}.node strong{display:block;font-size:11.5px;color:var(--muted);font-family:var(--mono)}.node small{font-size:9.5px;display:block;margin-top:3px;letter-spacing:.3px;color:var(--dim)}.node.active .nodeicon{color:#0a0e13;background:var(--lc,var(--transport));border-color:var(--lc,var(--transport));box-shadow:0 0 28px var(--lc,rgba(251,191,36,.5));transform:scale(1.08)}.node.active strong{color:#fff}.runner{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--lc);box-shadow:0 0 12px var(--lc);z-index:4;animation:run .42s cubic-bezier(.3,0,.4,1) forwards;pointer-events:none}@keyframes run{0%{left:var(--sx);top:var(--sy);opacity:1;transform:scale(1)}85%{opacity:.8}to{left:var(--ex);top:var(--ey);opacity:0;transform:scale(.5)}}.network .packet{position:absolute;transform:translate(-50%,-50%);z-index:5;animation:settle .3s ease-out}.packet .ping{position:absolute;inset:-11px;border:1.5px solid var(--lc);border-radius:50%;animation:ping 1.1s ease-out infinite}.packet .chip{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--lc);color:#0a0e13;font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.3px;box-shadow:0 0 16px var(--lc)}@keyframes ping{0%{transform:scale(.4);opacity:.9}to{transform:scale(2.2);opacity:0}}@keyframes settle{0%{transform:translate(-50%,-50%) scale(.4);opacity:.4}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.activeeventbar{display:flex;align-items:center;gap:11px;min-height:54px;padding:9px 16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#0a1119}.activepulse{width:8px;height:8px;border-radius:50%;background:var(--lc);box-shadow:0 0 12px var(--lc);flex-shrink:0;animation:activepulse 1.2s ease-in-out infinite}@keyframes activepulse{50%{transform:scale(1.35);opacity:.65}}.activeeventbar div{min-width:0;flex:1}.activeeventbar small{display:block;color:var(--dim);font:9px var(--mono);letter-spacing:1px}.activeeventbar b{display:block;margin-top:3px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activekind{font:9px var(--mono);letter-spacing:1px;color:var(--dim2);border:1px solid var(--border2);padding:5px 7px;border-radius:5px;flex-shrink:0}.direction{font:9px var(--mono);letter-spacing:1px;color:#93e9ff;border:1px solid #1e3a4a;background:#93e9ff0f;padding:5px 7px;border-radius:5px;flex-shrink:0;white-space:nowrap}.panelhint{margin:0;padding:10px 18px;font-family:var(--mono);font-size:11px;color:var(--dim2);border-bottom:1px solid var(--border);background:#0a1119}.legend{border-top:1px solid var(--border)}.legend summary{list-style:none;cursor:pointer;padding:10px 18px;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--dim2)}.legend summary::-webkit-details-marker{display:none}.legend summary:hover{color:var(--text)}.legendbody{padding:0 18px 16px;color:var(--muted);font-size:11.5px;line-height:1.7}.layerrail{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--border)}.layerchip{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 4px;border-right:1px solid var(--border);font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--dim);transition:all .3s}.layerchip:last-child{border-right:0}.layerchip .sw{width:7px;height:7px;border-radius:2px;background:var(--dim)}.layerchip.on{color:var(--lc);background:color-mix(in srgb,var(--lc) 10%,transparent)}.layerchip.on .sw{background:var(--lc);box-shadow:0 0 8px var(--lc)}.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:start}.events{max-height:640px;overflow:auto;min-width:0}.phaselabel{position:sticky;top:0;background:#0b121b;font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;color:var(--dim);padding:9px 18px;border-bottom:1px solid var(--border);z-index:2}.event{width:100%;display:flex;align-items:center;gap:11px;text-align:left;background:transparent;border:0;border-bottom:1px solid #101b28;padding:12px 18px;cursor:pointer}.event:hover{background:#0d1722}.event.selected{background:#0f1c2b}.seq{width:22px;flex-shrink:0;color:var(--dim);font:11px var(--mono)}.dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;background:var(--lc);box-shadow:0 0 8px var(--lc)}.eventbody{flex:1;min-width:0}.eventbody b{font-size:12.5px;display:block;color:var(--text);font-weight:600}.eventbody small{display:block;margin-top:4px;font-size:10px;letter-spacing:.3px;color:var(--dim);font-family:var(--mono)}.arrow{font-size:20px;color:var(--dim)}.event.fallback .dot{background:var(--transport)}.empty{padding:44px 22px;color:var(--dim);text-align:center;line-height:1.7;font-size:13px}.empty.big{padding:60px 26px}.empty i{color:var(--muted);font-style:normal}.inspector{min-height:320px}.tabs{display:flex;border-bottom:1px solid var(--border);overflow-x:auto}.tabbtn{background:transparent;border:0;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:1.2px;padding:13px 16px;border-bottom:2px solid transparent;white-space:nowrap}.tabbtn.on{color:var(--text);border-bottom-color:var(--transport)}.tabpane{padding:22px}.kind{display:inline-block;font-size:9px;letter-spacing:1.5px;font-family:var(--mono);padding:6px 9px;border:1px solid var(--lc);color:var(--lc);border-radius:5px}.inspect h2{font-family:var(--mono);font-size:22px;letter-spacing:-.6px;margin:14px 0;font-weight:700}.inspect p{color:#b3c2d1;line-height:1.65;font-size:13px}.why,.fallback,.packetbox{margin-top:16px;padding:14px;border-radius:10px;background:#0a121c;border:1px solid #172431}.why b,.fallback b,.packetbox small{display:block;font-size:9px;letter-spacing:1.2px;font-family:var(--mono);color:#6c8298;margin-bottom:8px}.why span,.fallback span{font-size:12.5px;line-height:1.6;color:#c3d0dd}.fallback{border-color:#4a3a1c;background:#151009}.fallback b{color:var(--transport)}.packetbox code{font:12px var(--mono);color:#93e9ff}.statebox{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.statebox div{background:#0a121c;border:1px solid #172431;border-radius:8px;padding:8px 11px}.statebox small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.8px;color:var(--dim)}.statebox span{font-family:var(--mono);font-size:11.5px;color:#e2ecf5}.meta{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}.meta span{font-size:10px;color:var(--dim);border:1px solid #182634;padding:8px 10px;border-radius:7px;font-family:var(--mono)}.meta b{color:#c3d0dd}.hint{margin-top:16px;color:var(--dim);font-size:11.5px;line-height:1.6}.framestack{display:flex;flex-direction:column;gap:0}.frame{border:1.5px solid var(--lc);border-radius:10px;padding:14px;margin-top:-1px;background:color-mix(in srgb,var(--lc) 6%,#0a121c)}.framelabel{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--lc);margin-bottom:10px;font-weight:700}.framefields{display:flex;flex-direction:column;gap:6px}.framefield{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:11.5px}.framefield small{color:var(--dim);letter-spacing:.3px}.framefield span{color:#e2ecf5;text-align:right}.seqtitle{font-family:var(--mono);font-size:12px;letter-spacing:.8px;color:var(--muted);margin-bottom:18px}.seqgrid{display:grid;grid-template-columns:repeat(var(--actors),1fr);gap:6px 14px}.seqactor{font-family:var(--mono);font-size:11px;color:#c3d0dd;text-align:center;padding-bottom:10px;border-bottom:1px dashed var(--border2)}.seqrow{padding:10px 0}.seqarrow{position:relative;height:14px;display:flex;align-items:center}.seqarrow:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--transport)}.seqarrow:after{content:"▸";position:absolute;right:-2px;top:50%;transform:translateY(-52%);color:var(--transport);font-size:11px}.seqarrow.rev:after{content:"◂";right:auto;left:-2px}.seqlabel{position:relative;margin:auto;background:#0c141e;padding:2px 9px;font-family:var(--mono);font-size:10.5px;color:#fbbf24}.seqnote{display:block;text-align:center;color:var(--dim);font-size:10px;margin-top:4px}.dnschain{display:flex;flex-direction:column;gap:0}.dnshop{display:flex;gap:14px;position:relative;padding-bottom:22px}.dnshop:last-child{padding-bottom:0}.dnshop:before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:1px;background:var(--border2)}.dnshop:last-child:before{display:none}.dnsdot{width:23px;height:23px;border-radius:50%;border:1px solid var(--network);color:var(--network);font-family:var(--mono);font-size:11px;display:grid;place-items:center;flex-shrink:0;background:#0a121c}.dnsbody b{font-size:12.5px}.role{color:var(--dim);font-family:var(--mono);margin-left:6px;font-size:9.5px}.dnsq{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px}.dnsa{font-family:var(--mono);font-size:11.5px;color:#a7f3c8;margin-top:4px}.cacheable{display:inline-block;margin-top:6px;color:var(--dim);border:1px solid var(--border2);padding:2px 7px;border-radius:5px}.nattable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}.nattable th{text-align:left;color:var(--dim);font-size:9.5px;letter-spacing:1px;padding:0 0 10px;font-weight:600}.nattable td{padding:10px 10px 10px 0;border-top:1px solid var(--border);color:#e2ecf5}.wfrows{padding:18px}.wfrow{display:grid;grid-template-columns:130px 1fr 56px;align-items:center;gap:12px;padding:6px 0}.wflabel{font-family:var(--mono);font-size:10.5px;color:var(--muted)}.wftrack{height:9px;background:#0a121c;border-radius:5px;overflow:hidden}.wfbar{height:100%;background:linear-gradient(90deg,#7dd3fc,#fbbf24);border-radius:5px}.wfms{font-family:var(--mono);font-size:10.5px;color:var(--dim2);text-align:right}.comparenote{margin:0;padding:14px 18px;border-top:1px solid var(--border);color:var(--muted);font-size:11.5px;line-height:1.7;background:#0a1119}.realpanel .panelhead{align-items:flex-start}.obsbadge{font-family:var(--mono);font-size:9px;letter-spacing:1.3px;color:#93e9ff;border:1px solid #1e3a4a;background:#93e9ff0f;padding:6px 10px;border-radius:999px;white-space:nowrap}.obsbadge.off{color:var(--dim2);border-color:var(--border);background:transparent}.realbody{padding:6px 4px}.observedwaterfall{padding:6px 18px 18px}.observedwaterfallhead{font-family:var(--mono);font-size:10px;letter-spacing:1.3px;color:#b9c9d8;padding:8px 0}.observedwaterfallhead small{display:block;font-size:9.5px;color:var(--dim2);letter-spacing:.2px;font-weight:400;margin-top:2px}.realstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}.realstats div{background:var(--bg2);padding:18px}.realstats small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--dim);letter-spacing:.5px}.realstats b{display:block;font-family:var(--mono);font-size:22px;margin:6px 0;color:#fff}.realstats span{font-size:10.5px;color:var(--dim)}.coverage{padding-top:60px}.coverage h2{font-family:var(--mono);font-size:26px;margin:10px 0 26px;letter-spacing:-.6px;max-width:760px;line-height:1.35;font-weight:700}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.coverageitem{display:flex;gap:15px;padding:17px;background:var(--bg2);border:1px solid var(--border);border-radius:11px}.coverageitem em{font:11px var(--mono);color:var(--transport);font-style:normal;flex-shrink:0}.coverageitem b{display:block;font-size:12.5px}.coverageitem small{display:block;margin-top:6px;letter-spacing:.2px;line-height:1.5;color:var(--dim);font-size:11px}@media(max-width:980px){.app{padding:0 16px 60px}.topbar{height:auto;padding:16px 0;flex-direction:column;align-items:flex-start;gap:10px}.hero,.workspace{grid-template-columns:1fr}.hero{padding-top:24px;align-items:start;gap:26px}.hero h1{font-size:clamp(28px,8vw,40px)}.heroright{align-items:stretch}.modeswitch button{padding:10px}.urlbox{flex-wrap:wrap}.urlbox input{width:100%;order:1;padding:12px 6px}.urlbox .scheme{order:1}.urlbox .runbtn{order:2;width:100%;height:48px;margin-top:6px}.stepbar{position:sticky;top:0;bottom:0;z-index:20;box-shadow:0 -12px 30px #0000008c;padding-bottom:env(safe-area-inset-bottom);background:#0b121bf7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.kbdhint{display:none}.stepbarrow{display:grid;grid-template-columns:1fr 1fr}.stepmid{grid-column:1 / -1;grid-row:1;min-width:0;border-bottom:1px solid var(--border);text-align:center;align-items:center;padding:9px 12px}.stepcount{justify-content:center}.stepnav{grid-row:2;flex:none;width:100%;min-height:52px;padding:12px 10px}.stepnav.next,.stepnav.done{grid-row:2;grid-column:2;flex:none;width:100%;min-height:52px}.stepnav:first-child{grid-column:1}.stepnav.next{border-left:1px solid var(--border);border-top:0}.stepnav.done{grid-column:1 / -1;border-left:0;border-top:0}.stepnav.next small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.network{height:230px}.networkinner{min-width:820px;height:100%}.swipehint{display:block}.node{width:100px}.node strong{font-size:10px}.nodeicon{width:38px;height:38px;font-size:16px}.grid{grid-template-columns:1fr}.modebadge{align-self:stretch;text-align:left}.layerrail{grid-template-columns:repeat(4,1fr)}.layerchip{padding:9px 3px;font-size:9.5px}.realstats{grid-template-columns:1fr}.realstats>div{padding:14px}.workspace{gap:14px}.events{max-height:420px}.event{padding:11px 14px}.tabpane{padding:16px}.panelhead{padding:12px 14px}.coverage{padding-top:40px}.coverage h2{font-size:20px}.coverageitem{padding:14px}}@media(max-width:520px){.examples{gap:6px}.examplecard{font-size:10px;padding:8px 10px;min-width:0}.corecontrols{gap:6px}.control,.toggle{padding:8px 9px;min-width:0}.app{padding-left:10px;padding-right:10px;padding-bottom:150px}.topbar{padding-left:2px;padding-right:2px}.hero{padding-top:20px}.hero p{font-size:13px}.urlbox{padding:6px}.urlbox .scheme{font-size:13px;padding-left:7px}.urlbox input{font-size:14px}.urlbox .runbtn{font-size:11px}.corecontrols{display:grid;grid-template-columns:1fr 1fr}.control,.toggle{width:100%;min-height:52px}.network{height:245px}.networkinner{min-width:760px}.layerrail{grid-template-columns:repeat(4,1fr)}.layerchip{min-height:38px}.activeeventbar{padding:9px 12px}.panel{border-radius:11px}.panelhead small{line-height:1.45}.events{max-height:none}.event{min-height:64px;padding:11px 10px}.eventbody b{font-size:12px}.eventbody small{font-size:9px}.seq{width:18px;font-size:10px}.tabpane{padding:14px}.inspect h2{font-size:18px}.realbody{padding:2px}.coverage{padding-top:30px}.stepbarrow{grid-template-columns:1fr 1.4fr}.stepnav{font-size:10px}}html{scroll-behavior:smooth}@media(max-width:980px){.app{max-width:100%;overflow-x:clip}.hero{width:100%}.workspace,.controls,.coverage{min-width:0}.events,.tabs,.network{overscroll-behavior-x:contain}.event,.stepnav,.modeswitch button,.urlbox .runbtn,.toggle,.examplecard,.quickpathchip{touch-action:manipulation}.urlbox input{min-height:44px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.concepts{max-width:900px;margin:0 auto;padding:0 28px 90px}.conceptsintro{padding:44px 0 26px}.conceptsintro h1{font-family:var(--mono);font-size:clamp(26px,3.4vw,38px);line-height:1.12;letter-spacing:-.5px;margin:12px 0 10px;font-weight:700}.conceptsintro p{color:var(--muted);font-size:14px;line-height:1.6;max-width:620px}.conceptscontrols{position:sticky;top:0;z-index:15;background:var(--bg);padding:14px 0;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--border)}.conceptssearch{display:flex;align-items:center;gap:10px;background:var(--bg2);border:2px solid var(--border2);border-radius:12px;padding:12px 16px}.conceptssearch span{color:var(--dim);font-size:15px}.conceptssearch input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-family:var(--mono);font-size:14px;min-width:0}.clearsearch{background:none;border:0;color:var(--dim2);font-size:13px;padding:2px 6px}.clearsearch:hover{color:var(--text)}.conceptscats{display:flex;gap:7px;flex-wrap:wrap}.conceptscats button{background:var(--bg2);border:1px solid var(--border);color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;padding:7px 12px;border-radius:999px}.conceptscats button:hover{border-color:var(--border2);color:var(--text)}.conceptscats button.on{background:#7dd3fc1f;border-color:var(--app);color:#fff}.conceptsempty{margin-top:24px;padding:30px;text-align:center;border:1px dashed var(--border2);border-radius:12px;color:var(--dim)}.conceptgroup{margin-top:30px}.conceptgroup h2{font-family:var(--mono);font-size:11px;letter-spacing:1.8px;color:var(--transport);text-transform:uppercase;margin:0 0 12px}.conceptlist{display:flex;flex-direction:column;gap:10px}.conceptcard{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .15s}.conceptcard.open{border-color:var(--border2)}.conceptq{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:none;border:0;padding:16px 18px;text-align:left;color:var(--text);font-size:14.5px;font-weight:600}.conceptq:hover{background:#ffffff05}.conceptcaret{color:var(--dim2);font-size:12px;flex-shrink:0}.concepta{padding:0 18px 20px;border-top:1px solid var(--border)}.concepta p{color:var(--muted);line-height:1.7;font-size:13.5px;margin:14px 0 0}.concepta .conceptmore{color:var(--dim2);font-size:13px;padding-top:10px;margin-top:10px;border-top:1px dashed var(--border)}.conceptwhy,.conceptwhen{margin-top:12px;padding:12px 14px;border-radius:8px;background:#0a121c;border:1px solid #172431}.conceptwhy b,.conceptwhen b{display:block;font-size:9px;letter-spacing:1.2px;font-family:var(--mono);margin-bottom:6px}.conceptwhy b{color:var(--transport)}.conceptwhen b{color:#6c8298}.conceptwhy span,.conceptwhen span{font-size:12.5px;line-height:1.6;color:#c3d0dd}.conceptcard.conceptbig{border-color:var(--transport)}.conceptcard.conceptbig .conceptq span:first-child{font-weight:600}.conceptsteps{list-style:none;margin:16px 0 0;padding:0;counter-reset:step;display:flex;flex-direction:column;gap:16px}.conceptsteps li{padding:14px 16px;border-radius:10px;background:#0a121c;border:1px solid #172431}.conceptsteps h3{margin:0 0 8px;font-size:12.5px;font-family:var(--mono);letter-spacing:.3px;color:var(--transport)}.conceptsteps p{margin:0;font-size:13px;line-height:1.75;color:var(--muted)}.conceptrelated{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px}.conceptrelated small{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--dim2);margin-right:2px}.relatedchip{background:var(--bg2);border:1px solid var(--border2);color:#9fdcfb;font-family:var(--mono);font-size:10.5px;padding:6px 11px;border-radius:999px}.relatedchip:hover{border-color:var(--app);background:#7dd3fc14}@media(max-width:640px){.concepts{padding:0 16px 70px}.conceptsintro{padding:28px 0 18px}}